html中的购物车下拉菜单的图标如何实现???

iconfont的使用教程(浏览器中的特殊字体)

第一步:打开iconfont官网:(阿里妈妈旗下)

https://www.iconfont.cn/
html中的购物车下拉菜单的图标如何实现???

第二步:挑选需要的字体

html中的购物车下拉菜单的图标如何实现???
html中的购物车下拉菜单的图标如何实现???点击添加入库

第三部:打开右上角的购物车(出现窗口,点击下载代码)

html中的购物车下拉菜单的图标如何实现???

第四部,下载完成后解压:

html中的购物车下拉菜单的图标如何实现???

第五步:打开文件demo_index.html

网站打开后有详细的使用教程
html中的购物车下拉菜单的图标如何实现???

第六步:引入下载的字体:

1:新建项目:

html中的购物车下拉菜单的图标如何实现???

2.将解压得到文件夹所选项目复制到Demo文件夹中

html中的购物车下拉菜单的图标如何实现???
html中的购物车下拉菜单的图标如何实现???

3.新建CSS文件将官方教程中的代码写入

html中的购物车下拉菜单的图标如何实现???
将font-size引入到CSS文件中
html中的购物车下拉菜单的图标如何实现???

4. 创建.iconfont类样式:

html中的购物车下拉菜单的图标如何实现???
样式引入到CSS中
html中的购物车下拉菜单的图标如何实现???

5.创建标签,加入样式,引入字体:
1.创建标签:

html中的购物车下拉菜单的图标如何实现???

2.将官网中的unicode码赋值到文件中

html中的购物车下拉菜单的图标如何实现???
引入unicode码和css文件
html中的购物车下拉菜单的图标如何实现???

3.Alt + F2 运行项目

我们的字体就可以在正常展示啦!
html中的购物车下拉菜单的图标如何实现???
另外字体还可以修改颜色哦:
html中的购物车下拉菜单的图标如何实现???
html中的购物车下拉菜单的图标如何实现???

最后还有Fontclass 和 Symbol 的方式可以实现字体的引入,我在这里就不一一列举了;