我有一些看起来像这样的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内容,即,
a:before {
content: "<i class='fa...'>...</i>";
}
Run Code Online (Sandbox Code Playgroud)
我知道我不能使用HTML代码content,所以它只剩下图像吗?
<a>出于某种原因,我必须在标签中包装我的图标.
有没有可能的方法将字体 - 真棒图标的颜色更改为黑色?
或者只要它包裹在<a>标签内是不可能的?字体真棒应该是字体而不是图像,对吧?

<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>
Run Code Online (Sandbox Code Playgroud) 可以说我有一个带有字体真棒图标和一些文字的引导按钮:
<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标签,使用左拉和显示:表.也许有人可以建议一个更简单的方法
所以我正在尝试原型化营销页面,我正在使用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)
但所有这一切都在一个大广场上呈现.有谁知道会发生什么?
在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的按钮有一个很好的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>在处于加载状态时删除按钮内的图标.
这是一个简单的演示,显示了我上面描述的行为.当你看到它进入加载状态时,图标就会消失.它会在时间间隔后重新出现.
我正在尝试在我的应用程序上使用Font Awesome,我能够使用该字体集成Typeface.createFromAsset(),但我也想使用这种字体提供的图标,但到目前为止我还没能做到这一点.
此特定字体包含Unicode专用区(PUA)内的图标,用于媒体播放器控件,文件系统访问,箭头等内容.
有没有人在Android上使用包含图标和符号的字体,这有可能吗?
我想知道是否可以利用font-awesome(或任何其他标志性字体)类来创建自定义<li>列表样式类型?
我目前正在使用jQuery来做到这一点,即:
$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");
Run Code Online (Sandbox Code Playgroud)
但是,当<li>文本在页面上换行时,这不正确,因为它认为图标是文本的一部分,而不是实际的子弹指示器.
有小费吗?
我喜欢Font Awesome图标字体,并希望将其用于我网站上的大多数图标,但除了提供的内容之外,还有一些我需要的自定义svg图标.
我注意到Font Awesome的.svg版本主要由以下<glyph />元素组成:
...
<glyph unicode="" 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)