我想使用字体真棒图标作为CSS内容,即
a:before { content: "<i class='fa...'>...</i>"; }
我知道我不能在 content 中使用HTML代码,所以它只剩下图像吗?
content
Update for FontAwesome 5 感谢Aurelien
您需要根据要渲染的图标类型将 font-family 更改为 Font Awesome 5 Brands 或 Font Awesome 5 Free . 另外,不要忘记申报 font-weight: 900;
font-family
Font Awesome 5 Brands
Font Awesome 5 Free
font-weight: 900;
a:before { font-family: "Font Awesome 5 Free"; content: "\f095"; display: inline-block; padding-right: 3px; vertical-align: middle; font-weight: 900; }
Demo
您可以阅读下面的其余答案,了解它的工作原理,并了解图标和文本之间的间距的一些变通方法 .
FontAwesome 4 and below
这是使用它的错误方法 . 打开字体awesome样式表,转到要使用的字体的 class 说 fa-phone ,用该实体复制该类下的content属性,并使用它:
class
fa-phone
a:before { font-family: FontAwesome; content: "\f095"; }
只需确保如果您要定位特定的 a 标记,请考虑使用 class 来使其更具体,如:
a
a.class_name:before { font-family: FontAwesome; content: "\f095"; }
使用上面的方法会将图标与你的剩余文本粘在一起,所以如果你想在它们之间留一点空间,那就把它变成 display: inline-block; 并使用一些 padding-right :
display: inline-block;
padding-right
a:before { font-family: FontAwesome; content: "\f095"; display: inline-block; padding-right: 3px; vertical-align: middle; }
进一步扩展这个答案,因为许多人可能需要在悬停时更改图标,所以为此,我们可以为 :hover 操作编写单独的选择器和规则:
:hover
a:hover:before { content: "\f099"; /* Code of the icon you want to change on hover */ }
现在在上面的例子中,图标因为大小不同而轻推,你肯定不希望这样,所以你可以在基本声明上设置一个固定的 width
width
a:before { /* Other properties here, look in the above code snippets */ width: 12px; /* add some desired width here to prevent nudge */ }
另一种解决方案,无需手动处理Unicode字符,可以在Making Font Awesome awesome - Using icons without i-tags中找到(免责声明:我写了这篇文章) .
简而言之,您可以创建一个这样的新类:
.icon::before { display: inline-block; margin-right: .5em; 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); }
然后将其与任何图标一起使用,例如:
<a class="icon fa-car" href="#">This is a link</a>
如果您可以从font-awesome访问SCSS文件,则可以使用以下简单解决方案:
.a:after { // Import mixin from font-awesome/scss/mixins.scss @include fa-icon(); // Use icon variable from font-awesome/scss/variables.scss content: $fa-var-exclamation-triangle; }
你可以在CSS中使用unicode . 如果你使用字体awesome 5,这是语法;
.login::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007"; }
你可以看到他们的文档here .
正如它在FontAwesome网站上所述FontAwesome =>
HTML:
<span class="icon login"></span> Login</li>
CSS:
.icon::before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } .login::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007"; }
在 .login::before - >编辑 content:''; 以适合您的unicode .
.login::before
content:'';
a:before { content: "\f055"; font-family: FontAwesome; left:0; position:absolute; top:0; }
示例链接:https://codepen.io/bungeedesign/pen/XqeLQg
从以下网址获取图标代码:https://fontawesome.com/cheatsheet?from=io
6 回答
Update for FontAwesome 5 感谢Aurelien
您需要根据要渲染的图标类型将
font-family
更改为Font Awesome 5 Brands
或Font Awesome 5 Free
. 另外,不要忘记申报font-weight: 900;
Demo
您可以阅读下面的其余答案,了解它的工作原理,并了解图标和文本之间的间距的一些变通方法 .
FontAwesome 4 and below
这是使用它的错误方法 . 打开字体awesome样式表,转到要使用的字体的
class
说fa-phone
,用该实体复制该类下的content属性,并使用它:Demo
只需确保如果您要定位特定的
a
标记,请考虑使用class
来使其更具体,如:使用上面的方法会将图标与你的剩余文本粘在一起,所以如果你想在它们之间留一点空间,那就把它变成
display: inline-block;
并使用一些padding-right
:进一步扩展这个答案,因为许多人可能需要在悬停时更改图标,所以为此,我们可以为
:hover
操作编写单独的选择器和规则:Demo
现在在上面的例子中,图标因为大小不同而轻推,你肯定不希望这样,所以你可以在基本声明上设置一个固定的
width
Demo
另一种解决方案,无需手动处理Unicode字符,可以在Making Font Awesome awesome - Using icons without i-tags中找到(免责声明:我写了这篇文章) .
简而言之,您可以创建一个这样的新类:
然后将其与任何图标一起使用,例如:
如果您可以从font-awesome访问SCSS文件,则可以使用以下简单解决方案:
你可以在CSS中使用unicode . 如果你使用字体awesome 5,这是语法;
你可以看到他们的文档here .
正如它在FontAwesome网站上所述FontAwesome =>
HTML:
CSS:
在
.login::before
- >编辑content:'';
以适合您的unicode .示例链接:https://codepen.io/bungeedesign/pen/XqeLQg
从以下网址获取图标代码:https://fontawesome.com/cheatsheet?from=io