其他分享
首页 > 其他分享> > iconfont 彩色图标的使用

iconfont 彩色图标的使用

作者：互联网

之前写过iconfont单色图标的应用，今天来介绍一下彩色图标的使用

文章目录

一、去iconfont矢量图库下载素材

1、挑选自己喜欢的素材

把自己想要的素材点击 添加入库
在这里插入图片描述
在右上角的购物车中点击打开
在这里插入图片描述
在这里插入图片描述

2、然后下载到本地，是个压缩包

在这里插入图片描述

3、把压缩包解压到你的项目底下

在这里插入图片描述

4、打开解压后的文件

在这里插入图片描述

5、打开demo_index.html

在这里插入图片描述
Unicode 和 Font class都是黑白图标，所以我们点击Symbol，这个网页上都有教程教我们怎么使用，我来演示一下

二、在页面中引入

1、创建页面项目文件夹

在这里插入图片描述

我分别建了css的文件夹，页面的文件夹page

2、编写基本页面结构

3、把demo_index.html里的内容复制到网页上

在这里插入图片描述
这里要做一些修改，因为存放的文件夹不同，所以引用路径也不同。

4、script引入

路径一定要正确，不正确就没用！！
在这里插入图片描述
引入的文件是这个
在这里插入图片描述

5、编写css文件

也是把demo_index.html中的style文档复制到你的css中，可以自己改变一下图标大小
在这里插入图片描述
要记得在index.html中引入这个css文件哦，别忘了
在这里插入图片描述

6、把demo_index.html中的svg复制到页面的body中

在这里插入图片描述
注意这里面的<use xlink:href="#icon-miantiao"></use> #icon-miantiao这个东西是图标的名字，在demo_index.html中查找
在这里插入图片描述

三、效果展示

在这里插入图片描述

总结

HTML代码：

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="../font_2664596_03gxajr1ogq6/iconfont.js"></script>
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-guozhi"></use>
    </svg>

    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-jiu"></use>
    </svg>
    
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-miantiao"></use>
    </svg>
</body>

</html>

CSS代码：

.icon { width: 5em; height: 5em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }

标签：复制到,index,demo,彩色,iconfont,html,页面,图标
来源： https://blog.csdn.net/weixin_46248008/article/details/118614429