iconfont的图标使用Unicode格式的实现

一：准备

将自己需要的图标添加到自己的项目中，如下图所示：
将图标文件下载到本地

二：使用

复制项目里提供的@font-face
具体的使用
方式一：用i标签

方式二：通过伪元素添加图标

三：代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>iconfont的Unicode使用</title><style>html,body {height: 100%;}table,th,td {border: 1px solid black;}@font-face {font-family: "iconfont"; /* Project id 3013887 */src: url("./fonts/font_3013887_w4gpn5az95j.woff2")format("woff2"),url("./fonts/font_3013887_w4gpn5az95j.woff") format("woff"),url("./fonts/font_3013887_w4gpn5az95j.ttf")format("truetype");}/* 方式一： */.iconfont {font-family: "iconfont";font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}/* 方式二： */.icon-after::after {font-family: "iconfont";font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;/* content: ""; 无效*/content: "\e658;"; /* 有效 */}</style></head><body><h2>我test项目里的icon</h2><!-- 方式一： --><table><tr><th>名称</th><th>图标代码</th><th>图标</th></tr><tr><td>icon-checkbox-checked</td><td>& #xe658;</td><td><i class="iconfont"></i></td></tr><tr><td>icon-setting</td><td>& #xe78e;</td><td><i class="iconfont"></i></td></tr></table><br /><!-- 方式二： --><h2>通过伪元素添加图标</h2><div class="icon-after">这里的后面加上图标</div></body>
</html>

iconfont的图标使用Unicode格式的实现相关推荐

微信小程序引入iconfont单色图标实例(Unicode方式)
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中打开目标项目,下 ...
C#使用IconFont字体图标的动态加载（＆#xe格式转换）
IconFont 矢量字体图标由于文件小,资源多,可任意放大缩小不失真,方便着色等特点,在网页.Winform.WPF中被广泛使得.网页上介绍使用的文件很多,但动态加载并不多,本文将重点介绍利用C#语 ...
在Nuxt项目中使用iconfont阿里巴巴图标unicode
第一步:登录登录: iconfont阿里巴巴图标第二步:选择图标添加到购物车第三步:把购物车图标添加到项目第四步:找到我的项目第五步:将图标文件下载到本地第六步:在assets文件夹中创建 ...
iconfont 字体图标
目前国内使用最多的是iconfont-阿里巴巴字体矢量图标库, 字体图标主要显示网页中通用常用的一些小图标iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标 ...
png转iconfont_关于阿里图标库Iconfont生成图标的三种使用方式-新闻详情
关于阿里图标库Iconfont生成图标的三种使用方式发布时间:2017-07-28责任编辑:朱明浏览:1843 相信做过前端的都知道阿里巴巴矢量图标库,这是一个非常好用的添加小图标的方法,而且是完 ...
矢量图标库如何引入html,Iconfont矢量图标库在网站中的使用方法
原标题:Iconfont矢量图标库在网站中的使用方法大家都知道现在移动端网站设计比较热门,由于移动端的网站页面的收缩性要求很高,必然在网页设计中,一些小点的图标,使用图片收缩性,以及美观上并不是很理 ...
uniapp使用iconfont字体图标
本文介绍两种方案:一.使用iconfont字体图标二.使用icon图片情景1:使用灰色的字体图标方案一:使用iconfont字体图标步骤1:下载iconfont 步骤2:解压后只需要将ifon ...
iconfont字体图标的使用方法
今天来谈谈iconfont字体图标的使用方法一.打开阿里巴巴矢量图官网阿里巴巴矢量图官网界面如下: 二.选择登录:可以使用GitHub账号登录,用其他账号也可以这里我选择用GitHub账号登录 ...
iconfont（图标字体）
iconfont(图标字体) iconfont(图标字体) fontawesome 使用步骤通过伪元素来设置图标字体通过实体来显示图标字体 iconfont 使用步骤 a)使用Unicode引用方 ...

iconfont的图标使用Unicode格式的实现

一：准备

二：使用

三：代码

iconfont的图标使用Unicode格式的实现相关推荐

最新文章

热门文章