Fontawesome 无法通过 css 中的参考编号加载图标

Question

这类似于 'icon appears as a square' 问题，但是我的问题在使用 'fa fa-child' 等时有效，但在我使用图像参考 ID 时无效。

在我的布局中我有：

 <link href="~/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="/css/my-css.min.css" rel="stylesheet" id="theme">

css:

.my-button {
    background: linear-gradient(45deg,#585858,#8C8C8C)
}

.my-button-blue:before {
    content: "\f500";
    font-family: FontAwesome;
    position: absolute;
    color: white;
    top: 50%;
    left: 50%;
}

仅在我的 css 中使用“\f500”会破坏它（它只显示一个正方形），但是在下面的代码中使用它可以正常工作：

<i class="fas fa-smile fa-2x text-white"></i>

我也尝试过@import"../vendor/fontawesome-free/css/all.min.css";在我的-css

我打算将它用作我的背景图像的一部分，这样它 'crops' 在到达边缘时 - 有点像水印。

Fiddle:

https://jsfiddle.net/as8L924e/2/

虽然这显示没有图标...

Answer 1

如果没有 codepen 或其他东西，我不确定，但我认为问题可能与 font-family 有关，因为在 all.min.css 中 ff 被设置为 .fas{font-family:"Font Awesome 5 Free"}。因此，您可能还想尝试在代码中将字体系列更改为该值。

如果您查看 fontawesome 文件 all.min.css 中的内容，您会看到字体定义为

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

请记住，如果您为供应商安装更新版本的 fa，您的代码可能会损坏。

Answer 2

   <environment include="Development"> 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
     </environment>

Use :font-family:
         .my-button-blue:before {
            content: "\f500";
            font-family: "Font Awesome 5 Free";
            position: absolute;
            color: white;
            top: 50%;
            left: 50%;
    font-weight: 900;
            font-size: 20px;

Answer 3

在现代浏览器的开发者控制台的帮助下，您可以检查所有 css 属性被应用到带有 class 的图标。您可以使用这些 css 属性来定义自己的 classes 并根据需要使用它们。

这是它的示例。

.my-button-blue:before {
  content: "\f500";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  color: blue;
  top: 50%;
  left: 50%;
  font-weight: 900;
  font-size: 2em;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

下面是工作代码片段供参考。

.my-button-blue:before {
  content: "\f500";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  color: blue;
  top: 50%;
  left: 50%;
  font-weight: 900;
  font-size: 2em;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<i class="fas fa-smile fa-2x text-white"></i>

<i class="my-button my-button-blue"></i>

编码愉快。 :)

Fontawesome 无法通过 css 中的参考编号加载图标

Fontawesome can't load icon by reference number in css

css

font-awesome

asp.net-core