【css】iconfont的使用 Unicode 引用

项目背景

项目上需要加个图标，找到已有图标代码，很迷茫，这是用的什么字体文件啊。。。。
iconfont.ttf文件是不是就是所有的字体文件了？后面的t=一长串数字是干啥用的？是不是再加上一个.icon-eye就能显示小眼睛？各种好奇和疑问都一一实践，做出如下记录

找了资料后发现，这是阿里巴巴的iconfont，地址https://www.iconfont.cn/

.icon-erweima:before {
content: “\e605”;
}使用的是Unicode 引用

添加新图标

1、从阿里巴巴图标库查找想要的字体文件

地址 https://www.iconfont.cn/

2、加入购物车

3、点击右上角的购物车图标，将图标添加至项目

如果没有项目就新建项目

4、下载至本地

5、将字体图标文件复制到项目了

下载的文件

6、打开下载文件中的iconfont.css文件，将里面的内容复制到自己代码中

可以查看demo_index.html这里面的内容，很详细的说明

7、页面引用

如果是引入多个字体文件就需要多次引入字体文件

【css】iconfont的使用 Unicode 引用相关推荐

Css基本语法及页面引用
Css基本语法及页面引用 CSS代码出现在三个地方 </head><body><b style='....'>兄弟连</b> <!-- 1. 行内 ...
HTML、CSS、JS对unicode编码字符的规则
JS规则 JS代码里面的unicode编码字符的语法是:\uXXXX. 也就是:斜杠+字母u+四位数十六进制编码. 比如: "\u4f60" // "你"&qu ...
常用CSS中文字体转Unicode对照表
为什么要把中文转换为Unicode Unicode比传统的字符编码更节省费用,使软件或者网站能够运用于不同的系统平台.语言和国家,而不需要重建,同时也保证了资料在不同系统中的完整性.所以说你只要将中 ...
阿里图标库使用font class 写法和unicode引用，简单，使用快捷
主要介绍 font class和unicode 写法,个人比较偏好这两种写法,使用简单直接开始吧使用步骤 1.打开阿里图标库的官网:https://www.iconfont.cn/ 2.必须要先登 ...
史上最简单粗暴获取阿里巴巴iconfont图标，并引用到vant的方法（没有之一）
1.直接去www.iconfont.cn复制自己喜欢的图标svg 2.粘贴到html里面 3.设置css中svg path的fill属性颜色色值,就可以改变icon图标的填充色,p话不多说,上代码↓ ...
HTML、CSS、JS对unicode字符的不同处理
unicode字符的不同表示法 unicode字符在html.css和js中的表示方法均不相同,下面分别作介绍. 1.1. css表示法首先来一段很常见的bootstrap的字体图标代码: .gly ...
在Nuxt项目中使用iconfont阿里巴巴图标unicode
第一步:登录登录: iconfont阿里巴巴图标第二步:选择图标添加到购物车第三步:把购物车图标添加到项目第四步:找到我的项目第五步:将图标文件下载到本地第六步:在assets文件夹中创建 ...
CSS中图标字体的引用及3种使用方式——阿里巴巴矢量库
图标字体(iconfont) -在网页中经常需要使用一些图标,可以通过图片来引入图标,但图片本身比较大,也不灵活 -所以使用图标时,我们还可以将图标直接设置为字体,然后通过font-face的形式来对 ...
yii怎么引入css文件,Yii框架怎样引用JS和CSS文件
Yii框架怎样引用JS和CSS文件发布时间:2021-01-06 09:58:23 来源:亿速云阅读:118 作者:小新这篇文章给大家分享的是有关Yii框架怎样引用JS和CSS文件的内容.小编觉 ...