FontAwesome 字体图标库使用

灰太狼 2022-01-30 11:01 426阅读 0赞

## Intro ##

Font Awesome(以下简称fa)是一套绝佳的图标字体库和CSS框架。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_222222_t_70]

fa被设计为与内联元素一起使用。 
``和``标签被广泛应用于图标。(推荐使用``，标签更简短，且语义更精确) 
当使用fa的图标重叠时候，在``标签中嵌套两个``标签。

## 依赖 ##

两种方法，直接引入CDN或引入本地依赖(略)。 
CDN: `<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">`

## 使用 ##

* 简单使用 
 `搜索`
 * 设置style属性(color, font-size等) **灵活** 
 ``
 * 图标大小类

fa
 fa fa-lg
 fa fa-2x
 fa fa-3x
 fa fa-4x
 fa fa-5x

*  动态图标

<code>fa-spin</code>类可以让图标旋转。fa-spin 
 <code>fa-pulse</code>类可以让图标以8步为脉冲周期进行旋转。fa-pulse

*  图标旋转(顺时针旋转) `fa fa-* fa-rotate-90|180|270`

搜索
 搜索
 搜索
 搜索

*  图标翻转 `fa fa-flip-horizontal|vertical`

搜索
 搜索
 搜索

*  两个图标堆叠

用<code></code>中嵌套两个<code></code>标签。且<code></code> 
 两个子标签 <code></code>中，大图标(class=<code>fa-stack-2x</code>)中间嵌套着小图标(class=<code>fa-stack-1x</code>) 
 <code>fa-inverse</code>类用于其中的一个<code></code>，用于反转图标颜色。 
 
 
 
 
 fa-twitter on fa-circle-thin 
 
 
 
 
 
 fa-twitter (inverse) on fa-circle 
 
 
 
 
 
 fa-ban on fa-camera

* 图标固定宽度(fix width) `fa fa-fw` 
 `当不同的图标宽度偏离对齐时，用fa-fw类设置固定宽度的图标。适用于导航列表和列表组。`

页面如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_222222_t_70 1]

## Link ##

*  [Every Font Awesome 4.7.0 Icon, CSS Class, & Unicode][Every Font Awesome 4.7.0 Icon_ CSS Class_ _ Unicode]，这里有所有的fa图标类。
 *  [Bootstrap 字体图标 Glyphicons 使用][Bootstrap _ Glyphicons]

## Code ##

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
 <title>FontAwesome</title>
 <style>
 h3 {
 display: inline;
 }
 code {
 font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
 padding: 2px 4px;
 font-size: 90%;
 color: #c7254e;
 background-color: #f9f2f4;
 border-radius: 4px;
 }
 </style>
 </head>
 <body>
 <h3>简单使用</h3>
 搜索 
 
 <h3>设置style属性(color, font-size等)</h3>
 
 
 <h3>图标大小类</h3>
 fa
 fa fa-lg
 fa fa-2x
 fa fa-3x
 fa fa-4x
 fa fa-5x 
 
 <h3>动态图标</h3>
 <code>fa-spin</code>类可以让图标旋转。fa-spin 
 <code>fa-pulse</code>类可以让图标以8步为脉冲周期进行旋转。fa-pulse 
 
 <h3>图标旋转(顺时针旋转) <code>fa fa-* fa-rotate-90|180|270</code></h3>
 搜索
 搜索
 搜索
 搜索 
 
 <h3>图标翻转 <code>fa fa-flip-horizontal|vertical</code></h3>
 搜索
 搜索
 搜索 
 
 <h3>两个图标堆叠</h3>
 
 用<code></code>中嵌套两个<code></code>标签。且<code></code> 
 两个子标签 <code></code>中，大图标(class=<code>fa-stack-2x</code>)中间嵌套着小图标(class=<code>fa-stack-1x</code>) 
 <code>fa-inverse</code>类用于其中的一个<code></code>，用于反转图标颜色。 
 
 
 
 
 fa-twitter on fa-circle-thin 
 
 
 
 
 
 fa-twitter (inverse) on fa-circle 
 
 
 
 
 
 fa-ban on fa-camera 
 
 
 <h3>图标固定宽度(fix width) <code>fa fa-fw</code></h3>
 当不同的图标宽度偏离对齐时，用fa-fw类设置固定宽度的图标。适用于导航列表和列表组。
 
 </body>
 </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_222222_t_70]: /images/20220130/055b47f25bfa4842a966157bb6fcb6a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_222222_t_70 1]: /images/20220130/310b53c4809f4005a26783670fdad020.png
[Every Font Awesome 4.7.0 Icon_ CSS Class_ _ Unicode]: http://www.fontawesome.com.cn/cheatsheet/
[Bootstrap _ Glyphicons]: https://blog.csdn.net/wuyujin1997/article/details/90339110