Question

这类似于“图标显示为正方形”问题，但是我的作品在使用“ 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”;在my-css中

我想将其用作背景图像的一部分，以使其在到达边缘时“剪裁”，就像水印一样。

提琴：

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

尽管这没有显示图标...

Answer 1

   <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 2

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

如果检查字体文件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 3

借助现代浏览器的开发人员控制台，您可以检查将所有CSS属性都应用到带有类的图标上。您可以使用这些CSS属性定义自己的类，并根据需要使用它们。

这里是示例。

.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中的参考号加载图标

3 个答案: