Font Awesome图标的介绍与应用

1、介绍 Font Awesome是一套图标字体库及CSS框架，主要目的是和Bootstrap搭配使用，可以通过CSS提供的特性设置大小，颜色，阴影等图标库：http://www.fontawesome.com.cn/faicons/ 官网：https://fontawesome.com/?from=io 另一个常用的图标库是阿里矢量图标库https://www.iconfont.cn/

芋圆不想圆

13306人浏览 · 2022-04-16 20:57:55

芋圆不想圆 · 2022-04-16 20:57:55 发布

1、介绍

Font Awesome 是一套图标字体库及CSS框架，主要目的是和Bootstrap搭配使用，可以通过CSS提供的特性设置大小，颜色，阴影等

图标库：http://www.fontawesome.com.cn/faicons/

官网：https://fontawesome.com/?from=io

另一个常用的图标库是阿里矢量图标库https://www.iconfont.cn/

2、引用

将以下代码粘贴到网页HTML代码的部分.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

复制整个font-awesome文件夹到项目中，通过相对路径引用

3、使用方法

先在中引用图标库
打开图标库的页面：http://www.fontawesome.com.cn/faicons/

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wk0EaFru-1650113347380)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220416203852645.png)]$

找到对应的图标点击进入，有复制图标名称和复制源码两个选项，可以直接复制源码，把图标放在任意的位置

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0oU9gT8U-1650113347381)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220416203952815.png)]$

设置图标的属性：http://www.fontawesome.com.cn/examples/

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s3ezGAm9-1650113347382)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220416204811567.png)]$

4、案例

<div class="icon-bar">
        <a href="#" class="active"><i class="fa fa-home"></i></a>
        <a href="#"><i class="fa fa-search"></i></a>
        <a href="#"><i class="fa fa-envelope"></i></a>
        <a href="#"><i class="fa fa-globe"></i></a>
        <a href="#"><i class="fa fa-trash"></i></a>
    </div>

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    /*引用*/
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .icon-bar{
            width: 100%;
            background-color: #ddd;
            overflow: auto;
        }
     /*设置图标的样式*/
        a{
            width: 20%;
            float: left;
            text-align: center;
            color: white;
            font-size: 36px;
            padding: 12px 0;
        }
        a:hover{
            background-color: #ccc;
        }
        .active{
            background-color: thistle !important;
        }
    </style>
</head>