简单使用iconfont教程

小鱼儿 2022-05-11 15:18 334阅读 0赞

今天在写作业的时候，网页需要用到iconfont，于是趁热写一篇小教程吧，处女作哦！

1.百度搜索iconfont，进入首页。![70][]

2.点击上方 图标库，我们可以看到成千上万个icons。

3.选择自己需要的，鼠标放上去，可以入库、收藏和下载。

![70 1][]

4.点了入库中，我们把素材添加至项目（项目只是为了便于以后自己使用的分类管理，如果没有项目，随便创一个）

5.登录后，即可进行操作。

![70 2][]

6.编辑图标可以更改图标的大小颜色等。

![70 3][]

7.可以单独下载图标，不过下载来的是PNG、SVG、AI。

8.在这里我们选择打包下载到本地，并解压，其中html后缀为说明文档。

![70 4][]

![70 5][]

9.我们新建一个html+css，在css中导入如图所示文件。

![70 6][]

10.打开所下载文件夹里的demo\_unicode.html，可以看到icons的代码。

![70 7][]

11.下面我们来写一个Demo。（注意！**class必须包含iconfont**）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css/iconfont.css">
        <style>
            
            /* iconfont可以像文本一样设置大小颜色等 */
            .search{
                font-size: 35px;
                color: #f1393A;
            }
            
        </style>
    </head>
    <body>
    <h1>以下是刚才所下载的iconfont</h1> <br>
    <i class="iconfont"> 这是包裹</i>
    <i class="iconfont"> 这是自提柜</i>
    <i class="iconfont"><p class="search"></p> 这是搜索</i>
    </body>
    </html>

显示结果

![70 8][]

快挑选自己喜欢的图标操作起来吧！

[70]: /images/20220505/6131ae92a8544e65a3bd65ac662bfe0e.png
[70 1]: /images/20220505/433f76e88edb45f8b1b716381fc71311.png
[70 2]: /images/20220505/cd7928244ba34e1f864883cadfc98c33.png
[70 3]: /images/20220505/b45b91bb071049d8a157cbaefc4a937e.png
[70 4]: /images/20220505/645a4351351c41918ab40d7e0798eaba.png
[70 5]: /images/20220505/6942cb01c67947e9b55e26e7d2bfa4ab.png
[70 6]: /images/20220505/c1c66f0f3a4549719348d670aed1ada5.png
[70 7]: /images/20220505/a0c60e94beca48f782e4b705b76aa518.png
[70 8]: /images/20220505/727ade15c52d4440b1f96cf9179256d8.png