在CSS中使用字体真棒图标
我有一些看起来像这样的CSS：
#content h2 { background: url(..http://img.dovov.comtContent.jpg) no-repeat 0 6px; } 我想用Font Awesome中的图标replace图像。
反正我看不到在CSS中使用图标作为背景图片。 这是可能的假设Font Awesome样式表/字体在我的CSS之前加载？
您不能使用文本作为背景图像，但可以使用:before或:after伪类将文本字符放置在所需的位置，而不必添加各种杂乱的额外标记。
一定要在您的实际文本包装上设置position:relative来定位。
.mytextwithicon { position:relative; } .mytextwithicon:before { content: "\25AE"; /* this is your text. You can also use UTF-8 character codes as I do here */ font-family: FontAwesome; left:-5px; position:absolute; top:0; }
除了上面Diodeus的回答，还需要font-family: FontAwesome规则（假设你已经在CSS中声明了FontAwesome的@font-face规则）。 那么就知道哪个CSS内容值对应哪个图标。
我已经列在这里： http : //astronautweb.co/snippet/font-awesome/
实际上，即使font-awesome CSS也有类似的设置图标风格的策略。 如果你想快速保持icon 代码 ，请检查non-minified font-awesome.css文件，在那里它们是… 每种字体的纯度。
巩固以上所有内容，以下是最后一堂作品
.faArrowIcon { position:relative; } .faArrowIcon:before { font-family: FontAwesome; top:0; left:-5px; padding-right:10px; content: "\f0a9"; }
不需要将内容embedded到CSS中。 您可以将徽章内容放入fa元素中，然后调整徽章CSS。 http://jsfiddle.net/vmjwayrk/2/
<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;"> <span style=" background-color: navy; border-radius: 50%; font-size: .25em; display:block; position:absolute; text-align: center; line-height: 2em; top: -.5em; right: -.5em; width: 2em; height: 2em; border:solid 4px #fff; box-shadow:0px 0px 1px #000; color: #fff; ">17</span> </i>
在我的这个CSS工作
.adminheader:before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: "\f007"; }
使用下面的Python程序通过命令行从Font-Awesome图标创buildpng图像：
为此，您只需通过以下content将content属性和font-family属性添加到所需的元素：before或：after在适用的情况下。
例如：我想在我的post里面的所有元素之后附上一个附件图标。 所以，首先我需要search这个图标是否存在于fontawesome中。 就像我在这里find的那样，即fa fa-paperclip 。 然后，我会右键点击那里的图标，然后去::before伪属性来获取它正在使用的content标签，在我的情况下，我发现它是\f0c6 。 然后我会用这个在我的CSS中：
.post a:after { font-family: FontAwesome, content: " \f0c6" /* I added a space before \ for better UI */ }
