我正在尝试在CSS的内容中使用FontAwesome。
它与图标而不是图标的代码一起显示。我已关注在线帮助,但仍然无法正常工作
css @font-face { font-family: 'FontAwesome'; src: url('https://use.fontawesome.com/releases/v5.0.6/css/all.css'); } .fp-prev:before { color:#fff; content: '/f35a'; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; }
如果您使用的是 JS + SVG版本,请 阅读以下内容:Font Awesome 5在使用JS +SVG版本时显示为空正方形
首先,您只需使用以下命令在head标签中包含Font Awesome 5的CSS文件:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
或在CSS文件中:
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css")
然后,您需要更正 字体系列 及其 内容, 如下所示:
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css"); .fp-prev:before { color:#000; content: '\f35a'; /* You should use \ and not /*/ font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/ font-style: normal; font-weight: normal; text-decoration: inherit; } <i class="fp-prev"></i>
在某些情况下,您还必须添加
font-weight:900
此处有更多详细信息:伪元素上的Font Awesome5显示方形而不是图标
注意:Font Awesome 5 font-family为每个图标包提供4种不同的颜色:
font-family
Font Awesome 5 Free 免费图标。
Font Awesome 5 Free
Font Awesome 5 Brands 适用于Facebook,Twitter等品牌图标。
Font Awesome 5 Brands
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css"); .fp-prev:before { color: #000; content: "\f099"; font-family: "Font Awesome 5 Brands"; font-style: normal; font-weight: normal; text-decoration: inherit; } <i class="fp-prev"></i>
Font Awesome 5 Pro对于字体真棒临
Font Awesome 5 Pro
Font Awesome 5 Duotone 还包含在Pro软件包中。
Font Awesome 5 Duotone