扩展字体真棒答案

【问题标题】：Extending Font Awesome扩展字体真棒
【发布时间】：2021-06-15 15:51:01
【问题描述】：

我在一个网站上使用 Font Awesome。

我有一些自定义图标，我想保持我的代码一致，所以我想以与 Font-Awesome 相同的方式使用我的新图标。

当我看到一个字体很棒的图标时，它的内容似乎是使用以下 CSS 设置的：

.icon-dashboard:before
{
    content: "\f0e5";
}

然后图标创建如下：

<a href="#"><i class="icon-dashboard></i></a>

但是，如果我有一个 .png 图像并尝试以相同的方式使用它，它似乎不起作用：

.icon-network:before
{
    content: url("images/network-icon.png");
}

这只是显示一个空白图像。我在这里错过了什么？

【问题讨论】：

这应该可以。注意这是一个相对路径，所以如果你的CSS文件在example.com/css/icons.css下，浏览器会尝试从example.com/css/images/network-icon.png加载图片。
路径绝对正确 - 在 VS 中，您可以突出显示参考以检查以确保可以找到它...
“\f0e5”是什么意思？
\f0e5 是 fontawesome 创建的字体中 char 的 id。 fontawesome 中的每个图标都是一个字体字符。但回到你的问题。 “空白图像”是什么意思？

标签： html css font-awesome

【解决方案1】：

如果没有进一步的样式，在伪元素中使用图像将无法工作 - 它不会被赋予任何空间（因此你不会看到它）。

这样的事情应该可以工作：

.icon-dashboard {
    height: 1em;        /* Fixed dimensions - scale with line height */
    width: 1em;
    position: relative; /* Required for inner 'absolute' positioning */
}

.icon-dashboard:before {
    content: '';
    height: 100%;       /* Fill parent */
    width: 100%;
    position: absolute;
    left: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("images/network-icon.png");
}

使用光栅图像而不是字体或 SVG 时需要注意的事项：

缩放/混叠问题
固定颜色

另一种方法是创建您自己的字体，其中包括 Font Awesome 字体以及您自己的字体 - 例如https://icomoon.io 或 https://fontastic.me

【讨论】：

【解决方案2】：

如果它显示空白图像，则表示您的路径已关闭。该路径是相对于您的 CSS 文件的。检查您的浏览器中试图从中提取图像的属性，这将有助于您诊断问题。

【讨论】：