iconfont的使用（详细介绍）

今天看iconfont的使用视频，有点断片，记得基础班没有讲过，可能是资源丢掉了，总结一下使用过程。

下面是网站地址

https://www.iconfont.cn/

使用需要登录账号，可以使用github或者微博账号登录，在右上角第一个小图标。

2. 选择自己需要的图标，先随便选中一个进行演示。（引入下面的资源）

点进去之后，鼠标移动上去，点击购物车图标

这样子的话，右上角的购物车里面就会显示出数量

3. 选择完毕之后，就点击一下小购物车

选择添加到项目（第一次使用的话需要新建一个项目，根据自己的需求制作就可以）

点击之后就会跳转到下面网页

4. 选择下载至本地，之后进行解压处理。

新建一个文件夹，将解压好的文件夹放入进去，之后新建的文件夹用哪个vscode打开。

5. 同级建一个.html文件
引入.css文件

<link rel="stylesheet" href="./font_2764063_nwtt8o6lbc/iconfont.css">

写图标类名：复制代码

写入类名（第一个必须是.iconfont 第二个是自己选的图标）

测试

演示2

补充：修改颜色+大小

iconfont的使用（详细介绍）相关推荐

HTML页面加载和解析流程详细介绍
浏览器加载和渲染html的顺序.如何加快HTML页面加载速度.HTML页面加载和解析流程等等,在本文将为大家详细介绍下,感兴趣的朋友不要错过浏览器加载和渲染html的顺序 1. IE下载的顺序是从上 ...
mysql为什么要压测_mysql集群压测的详细介绍
本篇文章给大家带来的内容是关于mysql集群压测的详细介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. mysql压测 mysql自带就有一个叫mysqlslap的压力测试工具,通 ...
php比较运算符案列,PHP实例：PHP比较运算符的详细介绍
<PHP实例:PHP比较运算符的详细介绍>要点: 本文介绍了PHP实例:PHP比较运算符的详细介绍,希望对您有用.如果有疑问,可以联系我们. 比拟运算符种类 PHP实战如同它们名称所暗示的 ...
Tempdb数据库详细介绍
Tempdb数据库详细介绍一.Tempdb简介 tempdb是SQLServer的系统数据库一直都是SQLServer的重要组成部分,用来存储临时对象.可以简单理解tempdb是SQLServer的 ...
linux路由介绍,Linux的路由表详细介绍
Linux的路由表详细介绍一在Linux下执行route命令[root@localhost backup]# route -nKernel IP routing tableDestination ...
pythonexcel介绍_Python 中pandas.read_excel详细介绍
Python 中pandas.read_excel详细介绍 #coding:utf-8 import pandas as pd import numpy as np filefullpath = r& ...
渡神纪帧数测试软件,渡神纪芬尼斯崛起配置要求高吗渡神纪配置要求详细介绍_游侠网...
渡神纪芬尼斯崛起配置要求高吗?本作将在12月3日登陆主机和PC,很多玩家比较关心游戏的配置,这里给大家带来了渡神纪配置要求详细介绍,快来了解下吧. 渡神纪配置要求详细介绍最低要求(720p/30 f ...
C++11 unordered_map详细介绍
整理的算法模板合集: ACM模板目录: 1.介绍 1.1 特性 2. 模版 2.1 迭代器 3. 功能函数 3.1 构造函数 3.2 容量操作 3.2.1 size 3.2.2 empty 3.3 ...
autosar中com模块_详细介绍AUTOSAR各个模块作用PART1（OS，SYS）
这片文章中我们详细讲解下每个模块的功能,上图是vector的autosar方案,每个模块的详细介绍后续会有单独文章进行讲解,请关注.以下是各个模块的简介 1.VHSM hardware Securit ...
python绘图和可视化_Python 绘图和可视化详细介绍
Python之绘图和可视化 1. 启用matplotlib 最常用的Pylab模式的IPython(IPython --pylab) 2. matplotlib的图像都位于Figure对象中. 可以使 ...

iconfont的使用（详细介绍）

iconfont的使用（详细介绍）相关推荐

最新文章

热门文章