☰

如何将字体图标插入网页？

tag-icon • tag-icon fonts icons css
如何将字体图标插入网页？

我会将以下 HTML 元素视为空元素，并且不显示任何内容内容在浏览器窗口中：

<p class="sample_class"></p>

但是当涉及到向 HTML 页面添加图标时，例如以下添加 Font Awesome 图标的示例代码（来自 W3CSchools.com）：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>

</body>
</html>

浏览器窗口中实际上显示了字体图标/符号。为什么？元素中的每一个不是都是<i> </i>空的吗？

答案1

您看到的内容来自 CSS。CSS 也可以使用:before和:after指示符添加内容。如果您查看font-awesome.min.css，您会发现以下几行，尽管顺序不同：

.fa-cloud:before {
    content:"\f0c2"
}
.fa-heart:before {
    content:"\f004"
}
.fa-automobile:before,.fa-car:before {
    content:"\f1b9"
}
.fa-file:before {
    content:"\f15b"
}
.fa-navicon:before,.fa-reorder:before,.fa-bars:before {
    content:"\f0c9"
}

相关内容