丰盛罐头'；t按css中的参考号加载图标

这类似于“图标显示为方形”问题，但我的问题在使用“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中使用“\f500”会破坏它（它只显示一个正方形），但在代码中使用它（如下所示）效果良好：

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

我还尝试了@import.。/vendor/fontawesome-free/css/all.min.css”；在我的css中

我打算把它作为我背景图像的一部分，这样当它到达边缘时，它就会“裁剪”——有点像水印

小提琴：

---

虽然这没有显示图标…

我不确定没有codepen或其他东西，但我认为问题可能出在

字体系列上，因为在
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，您的代码可能会损坏
 

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

使用：字体系列：
.我的按钮蓝色：以前{
内容：“\f500”；
字体系列：“字体真棒5免费”；
位置：绝对位置；
颜色：白色；
最高：50%；
左：50%；
字号：900；
字体大小：20px；
借助modern browser的开发者控制台，您可以检查所有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;
}

下面是供参考的工作代码段


。我的蓝色按钮：之前{
内容：“\f500”；
字体系列：“字体真棒5免费”；
位置：绝对位置；
颜色：蓝色；
最高：50%；
左：50%；
字号：900；
字号：2em；
-webkit字体平滑：抗锯齿；
显示：内联块；
字体风格：普通；
字体变体：正常；
文本呈现：自动；
线高：1；
}

你能用提琴或类似的东西来复制它吗？谢谢-这是有道理的，但它并没有解决问题：（您是否参考了CDN？>>并尝试添加>字体重量：900；字体大小：20px；尝试了它而不是我的本地版本-没有任何区别移动您的本地CSS使用CDN然后，添加大小和重量，如更新的回答中所示我尝试了CDN版本而不是本地版本-没有任何区别。不幸的是，我无法在生产中使用它因为我的网站处于脱机环境。我更新的代码现在有如上所述的字体大小和字体大小。我一直在看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;
}