Question

我在网站上使用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");
}

这只显示一张空白图片。我在这里缺少什么？

Answer 1

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

Answer 2

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

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

.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 个答案: