相关疑难解决方法(0)

我fontawesome在一个带有bootstrap 4的项目中集成了5个.当我通过css它回想起一个字体时不起作用.与fontawesome 4代码如下:

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
float: right;
content: '\f107';
font-family: 'FontAwesome'; }

我试图更改字体名称,但它不起作用

font-family: 'Font Awesome 5 Free'

我究竟做错了什么？

<ul>
<li class="facebook"> Facebook</li>
<li><i class="fab fa-twitter-square"></i> Twitter</li>
</ul>

li.facebook:before {
    content: "\f09a";
    font-family: FontAwesome;
}
li {
  list-style:none;
}

JSFiddle:https://jsfiddle.net/labanino/nwodoo32/

我无法自助服务并在我的网站服务器上加载网络字体,而关于此主题的其他Stack Overflow文章并没有帮助我找到错误.

我得到一个空白区域,字体应该出现.

以下是详细信息:

• https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/ 是我的字体的CSS文件的位置, fontawesome-all.css

• https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/webfonts 是我的字体的位置

首先,请确保我没有在标题中的样式表链接中提交与路径相关的错误.

我尝试过多种方式在HTML标题中引用字体的CSS样式表:

作为相对链接:

<link href="./fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">

作为绝对链接:

<link href="https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">

其次,确保我的@ font-face实现和指向的路径是正确的.在字体的样式表中fontawesome-all.css是对字体的@font-face调用:

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url("../webfonts/fa-brands-400.eot");
  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands'; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), …