时间戳

首页 > 解决方案 > Fontawesome 无法通过 css 中的参考编号加载图标

css - Fontawesome 无法通过 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：

.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

我想将它用作我的背景图像的一部分，以便它在到达边缘时“裁剪” - 有点像水印。

小提琴：

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

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

标签： cssasp.net-corefont-awesome

解决方案

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

推荐阅读