FontAwesome字体图标库

海天鹰

于 2025-03-19 13:25:07 发布

阅读量271

点赞数 2

分类专栏： HTML 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/sonichty/article/details/146367740

版权

HTML 专栏收录该内容

8 篇文章

订阅专栏

昨天在 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://fontawesome.dashgame.com" target="_blank">dashgame</a></p>
<i class="fa fa-bars fa-5x"></i>
<i class="fa fa-home fa-5x"></i>
<i class="fa fa-refresh fa-5x"></i>
<i class="fa fa-reply fa-5x"></i>
<i class="fa fa-question-circle fa-5x"></i>
<i class="fa fa-bell fa-5x"></i>
<i class="fa fa-inbox fa-5x"></i>
<i class="fa fa-shield fa-5x"></i>
<i class="fa fa-group fa-5x"></i>
<i class="fa fa-trash fa-5x"></i>
<i class="fa fa-external-link-square fa-5x"></i>
<i class="fa fa-file fa-5x"></i>
<i class="fa fa-paperclip fa-5x"></i>
<i class="fa fa-level-down fa-rotate-270 fa-5x"></i>
<i class="fa fa-chevron-right fa-5x"></i>
<i class="fa fa-wrench fa-5x"></i>
<i class="fa fa-search fa-5x"></i>
<i class="fa fa-cog fa-5x"></i>
<i class="fa fa-pencil fa-5x"></i>
<i class="fa fa-times fa-5x"></i>
<i class="fa fa-exclamation fa-5x"></i>
<i class="fa fa-quote-left fa-5x"></i>
<i class="fa fa-commenting-o fa-5x"></i>
<i class="fa fa-chevron-circle-up fa-5x"></i>
<i class="fa fa-spinner fa-spin fa-5x"></i>
<i class="fa fa-spinner fa-pulse fa-5x"></i>
<span class="fa-stack fa-5x">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x"></i>
</span>
</body>
</html>