CSS组件：字体图标_fa图标

作者：很楠不爱3 | 2024-02-19 09:24:18

踩

fa图标

字体图标

字体图标就是文字，只是这种文字长得和图标一样
在这里插入图片描述
字体图标优缺点

字体拥有的属性（字体大小、颜色等），均适用于字体图标
具有矢量性，无限放大也不会有马赛克，保证清晰度
字体图标大小相对于图片要小很多，加载快，灵活
字体图标只能是单一颜色，图片可以多种颜色混合

Font Awesome 图标 link

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

要使用Font Awesome图标，请在HTML页面的部分中添加以下行：

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
1

内联样式

基本使用

您可以使用前缀 fa 和图标的名称来放置 Font Awesome 图标
Font Awesome 设计为与内联元素一起使用，字体图标常放置在 i标签中

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
 
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
 
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

大图标

fa-lg (增加33％)，fa-2x，fa-3x， fa-4x，或 fa-5x 类用于增加相对于其容器的图标大小
也可以直接fant-size设置文字图标大小

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
 
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
 
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

列表图标

fa-ul 和 fa-li 类用于替换无序列表中的默认前缀

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
  <li><i class="fa-li fa fa-square"></i>List icons</li>
</ul>
1
2
3
4
5

动态图标

fa-spin 类可以让图标旋转, fa-pulse 类可以使图标以 8 步为周期进行旋转

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
1
2
3
4
5

旋转和翻转的图标

fa-rotate-* 和 fa-flip-* 类用于旋转和翻转图标

<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>
1
2
3
4
5
6

固定宽度图标

fa-fw 类用于设置固定宽度的图标。当不同的图标宽度偏离对齐时，此类非常有用。特别适用于Bootstrap的导航列表和列表组

<div class="list-group">
  <a href="#" class="list-group-item"><i class="fa fa-home fa-fw"></i> Home</a>
  <a href="#" class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
  <a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i> Applications</a>
  <a href="#" class="list-group-item"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
1
2
3
4
5
6

伪元素

通过伪元素来设置图标字体

找到要设置图标的元素通过before或after选中
在content中设置字体编码
设置正确的字体样式，否则可能会乱码
还可以自定义大小，颜色等等

<style type="text/css">
    li{
        list-style: none;
    }
    li::before{
        content: '\f368';
        /*font-family: 'Font Awesome 5 Free';*/
        font-family: 'Font Awesome 5 Brands';
        margin-right: 10px;
    }
</style>

<body>
<ul>
    <li>List icons</li>
    <li>List icons</li>
    <li>List icons</li>
</ul>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/113917