【字体图标】 Font Awesome字体图标如何使用？

一、Font Awesome官网

http://www.fontawesome.com.cn/

二、Font Awesome字体图标使用方式

就目前知道，有三种方式如下

需要注意的是：使用这种第三方图标，需要引入它们的样式：<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

1. 使用预编译class样式

2. 使用Unicode编码

3. 使用css样式

2-0、在线测试

https://www.runoob.com/try/try.php?filename=tryicons_fa-ambulance

2-1、预编译class样式

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<i class="fa fa-ambulance"></i>
<i class="fa fa-ambulance" style="font-size:24px"></i>
<i class="fa fa-ambulance" style="font-size:36px"></i>
<i class="fa fa-ambulance" style="font-size:48px;color:red"></i>

 

 

 2-2、Unicode编码

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<p>Unicode:</p>
<i style="font-size:24px" class="fa">&#xf0f9</i>

 

 

 2-3、css样式

当 Font Awesome图标默认表现样式不能满足需求的时候，我们可以自定义图标的表现形式；简单来说自定义预编译的css样式去表现字体图标。

字体图标在CSS样式中是如此表示“\f0f9”，即“fa-ambulance” ；

在css中我们通常通过伪类":before"，":after"来表示它。

自定义预编译样式

<style>
    .hr.star-bright:after, hr.star-dark:after{
        content:'\f075';
        font-family:FontAwesome;
        font-size:2em;
        display:inline-block;
        position:relative;
        top:-.8em;
        padding:0 .25em;
    }
</style>

应用测试

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<i style="font-size:24px" class="hr star-bright"></i>

 

 

总结

 Font Awesome表现形式如下三种

1. css样式“fa-ambulance” ->  unicode编码“&#xf0f9”  ->  “content代码：\f0f9”

2. content代码的“\”与Unicode编码的“&#x”是一样的

3. 在官网我们可以查看到字体图标的预编译样式和Unicode编码， 详情参考

　　http://www.fontawesome.com.cn/cheatsheet/

　　https://fontawesome.com/cheatsheet?from=io

 4. 参考文章：

　https://blog.csdn.net/laurel_y/article/details/70842157

　https://www.ivcxw.com/news/details/5/10.html

　https://blog.csdn.net/qq_44403367/article/details/105256831

　https://www.webuc.cn/w/soft/FontAwesome/4268.html

 

　https://www.jianshu.com/p/a6ac4ff6d0bc