我有一些CSS看起来像这样:
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
我想用字体很棒的图标替换图像。
我不认为在CSS中使用图标作为背景图像。这是可能的，假设字体Awesome样式表/字体在我的CSS之前加载?
当前回答
您不能使用文本作为背景图像，但可以使用:before或:after伪类将文本字符放置在您想要的位置，而不必添加各种凌乱的额外标记。
请确保在实际的文本包装器上设置position:相对位置，以便定位工作。
.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;
}
编辑:
Font Awesome v5使用了比旧版本更多的字体名称:
对于FontAwesome v5，免费版本，使用:Font -family: "Font Awesome 5 Free" 对于FontAwesome v5, Pro版本，使用:Font -family: "Font Awesome 5 Pro"
注意，您也应该设置相同的font-weight属性(似乎是900)。
找到字体名称的另一种方法是右键单击页面上的示例字体awesome图标，并获得字体名称(与找到utf-8图标代码的方法相同，但请注意，您可以在:before上找到它)。
其他回答
您不能使用文本作为背景图像，但可以使用:before或:after伪类将文本字符放置在您想要的位置，而不必添加各种凌乱的额外标记。
请确保在实际的文本包装器上设置position:相对位置，以便定位工作。
.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;
}
编辑:
Font Awesome v5使用了比旧版本更多的字体名称:
对于FontAwesome v5，免费版本，使用:Font -family: "Font Awesome 5 Free" 对于FontAwesome v5, Pro版本，使用:Font -family: "Font Awesome 5 Pro"
注意，您也应该设置相同的font-weight属性(似乎是900)。
找到字体名称的另一种方法是右键单击页面上的示例字体awesome图标，并获得字体名称(与找到utf-8图标代码的方法相同，但请注意，您可以在:before上找到它)。
不需要在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>
要使用字体awesome使用css遵循以下步骤-
步骤1 -在CSS中添加FontAwesome字体
/*Font Awesome Fonts*/
@font-face {
font-family: 'FontAwesome';
//in url add your folder path of FontAwsome Fonts
src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}
使用下面的css在HTML的class元素上应用字体
.sorting_asc:after {
content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
padding-left: 10px !important;
vertical-align: middle;
}
最后，使用“sorting_asc”类在所需的HTML标签/元素上应用css。
您可以尝试这个示例类。在这里找到图标内容:http://astronautweb.co/snippet/font-awesome/
#content h2: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";
}
实际上，即使是字体很棒的CSS也有类似的策略来设置图标样式。如果您想快速获取图标代码，请检查非缩小的font-awesome.css文件，它们是....每个字体都很纯净。
