标签: font-awesome

在CSS中使用字体真棒图标

我有一些看起来像这样的CSS:

#content h2 {
   background: url(../images/tContent.jpg) no-repeat 0 6px;
}
Run Code Online (Sandbox Code Playgroud)

我想用Font Awesome中的图标替换图像.

我不认为无论如何使用CSS中的图标作为背景图像.这可以假设在我的CSS之前加载Font Awesome样式表/字体吗?

css font-awesome

287
推荐指数
7
解决办法
50万
查看次数

使用字体真棒图标作为CSS内容

我想使用字体真棒图标作为CSS内容,即,

a:before {
    content: "<i class='fa...'>...</i>";
}
Run Code Online (Sandbox Code Playgroud)

我知道我不能使用HTML代码content,所以它只剩下图像吗?

html css font-awesome

260
推荐指数
5
解决办法
46万
查看次数

我可以更改Font Awesome图标颜色的颜色吗?

<a>出于某种原因,我必须在标签中包装我的图标.
有没有可能的方法将字体 - 真棒图标的颜色更改为黑色?
或者只要它包裹在<a>标签内是不可能的?字体真棒应该是字体而不是图像,对吧?

在此输入图像描述

<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>
Run Code Online (Sandbox Code Playgroud)

html css font-awesome

249
推荐指数
9
解决办法
43万
查看次数

如何使用大字体 - 真棒图标垂直居中文字?

可以说我有一个带有字体真棒图标和一些文字的引导按钮:

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>
Run Code Online (Sandbox Code Playgroud)

如何使文本垂直居中显示?文本现在与图标的下边缘对齐:http://jsfiddle.net/V7DLm/1/

编辑: 我有一个可能的解决方案:http://jsfiddle.net/CLdeG/1/但它感觉有点hacky - 介绍额外的p标签,使用左拉和显示:表.也许有人可以建议一个更简单的方法

html css html5 css3 font-awesome

219
推荐指数
7
解决办法
22万
查看次数

字体真棒不工作,图标显示为正方形

所以我正在尝试原型化营销页面,我正在使用Bootstrap和新的Font Awesome文件.问题是,当我尝试使用图标时,在页面上呈现的所有内容都是一个大方块.

这是我在头部包含文件的方式:

<head>
        <title>Page Title</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/app.css">
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
        <![endif]-->
</head>
Run Code Online (Sandbox Code Playgroud)

以下是我尝试使用图标的示例:

<i class="icon-camera-retro"></i>
Run Code Online (Sandbox Code Playgroud)

但所有这一切都在一个大广场上呈现.有谁知道会发生什么?

css html5 twitter-bootstrap font-awesome

205
推荐指数
15
解决办法
50万
查看次数

字体很棒,输入类型'提交'

在font-awesome中似乎没有输入类型'submit'的类.是否可以使用font-awesome中的某些类来输入按钮?我已经在我的应用程序中为所有按钮添加了图标(实际上它们与来自twitter-bootstrap的类'btn'链接),但无法在'input type submit'上添加图标.

或者,如何使用此代码:

input#image-button{
    background: #ccc url('icon.png') no-repeat top left;
    padding-left: 16px;
    height: 16px;
}
Run Code Online (Sandbox Code Playgroud)

HTML:

<input type="submit" id="image-button">Text</input>
Run Code Online (Sandbox Code Playgroud)

(我从HTML中获取:如何使用文本+图像制作提交按钮?)使用font-awesome?

twitter-bootstrap twitter-bootstrap-rails font-awesome

194
推荐指数
6
解决办法
23万
查看次数

如何在处于加载状态时向按钮添加微调器图标?

Twitter Bootstrap的按钮有一个很好的Loading...状态.

问题是它只是显示像这样Loading...传递data-loading-text属性的消息:

<button type="button" class="btn btn-primary start" id="btnStartUploads"
        data-loading-text="@Localization.Uploading">
    <i class="icon-upload icon-large"></i>
    <span>@Localization.StartUpload</span>
</button>
Run Code Online (Sandbox Code Playgroud)

看看Font Awesome,你会看到现在有一​​个动画微调器图标.

我尝试在触发这样的Upload操作时集成该微调器图标:

$("#btnStartUploads").button('loading');
$("#btnStartUploads i").removeAttr('class');
$("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large');
Run Code Online (Sandbox Code Playgroud)

但这根本没有效果,也就是说,我只看到Uploading...按钮上的文字.

按钮处于加载状态时是否可以添加图标?看起来不知何故Bootstrap只是<i class="icon-upload icon-large"></i>在处于加载状态时删除按钮内的图标.


这是一个简单的演示,显示了我上面描述的行为.当你看到它进入加载状态时,图标就会消失.它会在时间间隔后重新出现.

icons loading button twitter-bootstrap font-awesome

185
推荐指数
5
解决办法
40万
查看次数

如何在Native Android Application上使用"Font Awesome"中的图标和符号

我正在尝试在我的应用程序上使用Font Awesome,我能够使用该字体集成Typeface.createFromAsset(),但我也想使用这种字体提供的图标,但到目前为止我还没能做到这一点.

此特定字体包含Unicode专用区(PUA)内的图标,用于媒体播放器控件,文件系统访问,箭头等内容.

有没有人在Android上使用包含图标和符号的字体,这有可能吗?

android font-awesome

152
推荐指数
5
解决办法
11万
查看次数

带有font-awesome图标的自定义li列表样式

我想知道是否可以利用font-awesome(或任何其他标志性字体)类来创建自定义<li>列表样式类型?

我目前正在使用jQuery来做到这一点,即:

$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");
Run Code Online (Sandbox Code Playgroud)

但是,当<li>文本在页面上换行时,这不正确,因为它认为图标是文本的一部分,而不是实际的子弹指示器.

有小费吗?

css html-lists font-awesome

145
推荐指数
5
解决办法
24万
查看次数

添加自定义图标到字体真棒

我喜欢Font Awesome图标字体,并希望将其用于我网站上的大多数图标,但除了提供的内容之外,还有一些我需要的自定义svg图标.

我注意到Font Awesome.svg版本主要由以下<glyph />元素组成:

...
<glyph unicode="&#xf0b2;" horiz-adv-x="1536" d="M0 80v477q0 51 24.5 61.5t59.5 -24.5l162 -162l340 338l-338 338l-164 -164q-35 -35 -59.5 -25.5t-24.5 60.5v477q0 31 23 57q27 23 57 23h477q51 0 61.5 -24.5t-24.5 -59.5l-160 -158l338 -338l332 334l-162 162q-35 35 -24.5 59.5t61.5 24.5h477q33 0 55 -23 q25 -25 25 -57v-477q0 -51 -24.5 -61.5t-59.5 24.5l-162 162l-334 -334l338 -336l158 160q35 35 59.5 24.5t24.5 -61.5v-477q0 -35 -25 -55q-23 -25 -55 -25h-477q-51 0 -61.5 24.5t24.5 59.5l166 166l-336 336l-340 …
Run Code Online (Sandbox Code Playgroud)

svg webfonts font-awesome

134
推荐指数
6
解决办法
18万
查看次数