FontAwesome字体图标库

最新推荐文章于 2026-05-16 16:32:15 发布

原创

最新推荐文章于 2026-05-16 16:32:15 发布 · 523 阅读

标签

#javascript

收录于

昨天在 Catsxp 论坛发现图标是方框，就打开开发者工具查看，却发现图标是这样的结构：

<i class="fa fa-bars fa-5x">
  ::before
</i>

before的内容是一个类似于unicode的东西：

:before {
    content: "\f015";
}

查了半天才知道这是FontAwesome字体图标库。

Font Awesome，一套绝佳的图标字体库和CSS框架

摸索了半天才发现，要字体和CSS同时使用才能生效！

<html>
<title>Font Awesome</title>
<head>
<link rel="stylesheet" href="font-awesome.min.css">
<style>
@font-face { font-family:fontawesome; src:url(fontawesome-webfont.woff2); }
a { text-decoration:none; }
i { color:gray; }
.fa-camera { color:black; }
.fa-ban { color:crimson; }
</style>
</head>
<body>
<p><a href="https://webproxy.poorya-velaei-d67.workers.dev/https://fontawesome.dashgame.com" target="_blank">dashgame</a></p>
<i class="fa fa-bars fa-