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

1、挑选素材

把自己想要的素材点击添加购物车；

2、添加至项目

然后点击购物车，添加至项目，选择需要加入的项目里；

3、下载

选择unicode下载至本地

下载后是个压缩包，然后解压；

4、添加至项目

将文件复制到你的项目文件夹中

5、打开demo_index.html

Unicode 和 Font class都是黑白图标，所以我们点击Symbol，这个网页上都有教程教我们怎么使用

二、页面引入

我将按照以上步骤操作一番，

代码展示：

<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="./京东侧边栏.css"><!-- 彩色标签：第一步，引入iconfont.js --><script src="./image/图标/iconfont.js"></script><!-- 彩色标签：第二部，引入demo.css --><link rel="stylesheet" href="./image/图标/demo.css"><style>/* 彩色标签：第三部，修改标签大小等属性，这个可选 */.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>
</head>

            <li><a href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-meishi1"></use></svg><span>美食</span><i class="iconfont"></i></a></li>

展示效果：

三、注意

#icon-meishi1在demo_index.html里复制对应图标Symbol下的值

1、CSS中iconfont 彩色图标使用详解相关推荐

php中li标签,li标签有哪些属性？css中li标签的属性详解
在html中,我们经常会遇到li标签,那么li标签有哪些属性?下面我们来了解一下css中li标签的属性. 一:标签有哪些属性在html中,使用css中li标签来控制样式,很多网站上都是点为开头,也有 ...
html怎么设置左偏移量,CSS中margin属性的偏移量详解（代码示例）
本篇文章给大家介绍一下CSS中margin属性的偏移量,有感兴趣的朋友可以看一看. 话不多说,我们直接进入正题~ 我们先来看一个具体的例子(相关推荐:CSS学习手册) 代码入下:HTML文件和CSS文 ...
HTML中z index属性是用来,css中z-index 属性与用法详解
Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部.这个层叠顺序沿着垂 ...
CSS中clip-path属性的使用详解
CSS clip-path 属性属性定义及使用说明 clip-path 属性使用裁剪方式创建元素的可显示区域.区域内的部分显示,区域外的隐藏.可以指定一些特定形状. 语法:clip: clip-so ...
Font Awesome html源码,CSS 中Font Awesome 图标（附码表）
HTML中缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. 部分图标: 其他效果图: 调用实例: Font Awesome图标调用实例 N ...
怎么在小程序中使用彩色图标iconfont
怎么在小程序中使用彩色图标iconfont 国际惯例,先上图: 概要一般我们在开发的时候,都是采用 iconfont 来管理项目里的图标,方便快捷.但是当我需要将项目迁移的小程序的时候,就遇到了很多 ...
把svg图标制作成字体图标_让我们用SVG符号和CSS变量制作彩色图标
把svg图标制作成字体图标 by Sarah Dayan 通过莎拉·达扬让我们用SVG符号和CSS变量制作彩色图标 (Let's make multi-colored icons with SVG ...
直接在 CSS 中引用 FONTAWESOME 图标（附码表）
直接在 CSS 中引用 FONTAWESOME 图标(附码表) 因此我们如果不想用 Fontawesome 提供的类,只想在 css 里面引用图标的话,可以这样子,请自行脑补: .icon:befor ...
html中style布局放哪,CSS样式表与格式布局详解
样式表 CSS(Cascading Style Sheets 层叠样式表),作用是美化HTML网页. 内联样式表: 例: 内联样式表内嵌样式表:必须写在head标签里例: p { 样式;} he ...
HTML中的“雪碧图“详解
HTML中的雪碧图详解 1.雪碧图的支持格式: 每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片. 2.雪碧图的优点: (1)可以减小建立连接的消耗,加快运行. (2)多张 ...

1、CSS中iconfont 彩色图标使用详解