简单使用iconfont教程

最新推荐文章于 2022-09-29 23:00:18 发布

陈某男0427

最新推荐文章于 2022-09-29 23:00:18 发布

阅读量637

点赞数

文章标签： iconfont 前端图标阿里巴巴矢量图标库 css

本文链接：https://blog.csdn.net/weixin_42662269/article/details/83245099

版权

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

1.百度搜索iconfont，进入首页。

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

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

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

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

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

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

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

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

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

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">&#xe884; 这是包裹</i>
<i class="iconfont">&#xe886; 这是自提柜</i>
<i class="iconfont"><p class="search">&#xe8ba;</p> 这是搜索</i>
</body>
</html>

显示结果

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

陈某男0427

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单使用iconfont教程

今天在写作业的时候，网页需要用到iconfont，于是趁热写一篇小教程吧，处女作哦！ 1.百度搜索iconfont，进入首页。2.点击上方图标库，我们可以看到成千上万个icons。3.选择自己需要的，鼠标放上去，可以入库、收藏和下载。4.点了入库中，我们把素材添加至项目（项目只是为了便于以后自己使用的分类管理，如果没有项目，随便创一个）5.登录后，即可进...
复制链接

扫一扫