如何下载及使用网页制作中的 iconfont 矢量字体图标？

谈到iconfont

直译是字体图标，没错它就是。只要做过网页的筒靴们肯定知道它是什么，上图说：

文字前面有颜色的小图标就是iconfont,那肯定有人好奇那，它为什么这样称呼，和一般图标又有什么区别？它该怎么下载和使用呢？

别急别急，一步一步解答：

1.关于定义由来

之所以叫字体图标，就因为我们可以把这样的图标当做字体一样设置样式。

2. 关于下载和使用

今天来讲其中一种途径：

（1）如何搜索及下载

在任一浏览器搜索框输入以下检索内容:
点击进入：
主页面是这样的，大家可以去发现它的多功能，新用户需要注册的呦~ 当想下载你需要的图标时，在搜索框中输入即可：
选择你想要的图标，当你hover的时候，选择第一个加入购物车：
于是，右上角的购物车：
点击购物车图标，选择添加至项目：

类似的，你可以添加你想要的图标。

这时就进入了下图页面，你可以做相关编辑，比如说修改项目名称等等：
接着就可以导出，点击下载至本地即可：
下载之后，打开压缩包，点击文件：
选择子目录下的iconfont.css文件粘贴到你正在写的项目css文件中即可：

（2）如何使用？

在编程软件中打开之后我们要使用它。很简单, 定义一个标签的类为：

 <span class="iconfont icon-gouwuche"></span>

这时候刷新你的网页，它就出现了

类的命名：css类字体图标名称（导出之前自己可以编辑名称）

关于它的样式可以在css中进行设置：

span{color:#9f9f9f;position: absolute;top:6px;right: 80px;font-size:18px;
}

谢谢大家！

如何下载及使用网页制作中的 iconfont 矢量字体图标？相关推荐

在项目中使用阿里巴巴矢量字体图标
在项目中使用阿里巴巴矢量字体图标打开阿⾥巴巴字体iconfont 搜索需要的图标,选择要使用的图标,点击添加入库点击右上角的购物车按钮,进入库中选择添加入项目, 选择新建项目,或者使用已有项目 ...
在vscode中使用iconfont阿里字体图标
1.登录阿里巴巴矢量图标库 iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴体验团队倾力打造,设计 ...
微信小程序中使用阿里矢量字体图标
阿里矢量图库<----地址第一步: 第二步: 第三步: 第四步: 第五步:
网页制作中规范使用DIV+CSS命名规则（转）
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则内容如下: 页头:header 如:#header{属性:属性值;}或.h ...
怎样在html网页中加入一段话,网页制作中十分常用的十一句话
网页制作中非常常用的十一句话整理了一些比较实用的网站设计时常用的代码,代码很简单,只有一行,不需要理解多高深的JS或者HTML知识,按照提示把相应的代码加入到网页模板中即可得到你想要的效果. 1:进 ...
html中的ps,网页制作中PS图像处理的应用
网页制作中PS图像处理的应用 photoshop是一个功能强大的图像处理软件,可以对各种格式的图像文件进行非常精细与独特的处理,不仅适用于广告用图.美术摄影作品的处理,也广泛用于网页图像元素的处理.下 ...
html网页在指定位置嵌入表格,网页制作中表格的主要作用网页制作中插入表格怎么调整位置...
在网页设计中,表格有什么重要作用 1．当需要提交所有数据时,可以提交整个100个表,如果不使用表,可以逐个提交. 2．表格设计简洁美观,方形,与网页的设计非常一致. 3．网站其实是一个大版本的表格,数 ...
学习网页制作中如何在正确选取和使用 CSS 单位
在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...
网页制作中绝对路径和相对路径的区别
网页制作中绝对路径和相对路径的区别 http://www.veryhuo.com 烈火网 2012-10-10 投递稿件做个开发的人,对于文件或者文件夹的定义都是有一定的规范的,比如建立一个网站前端 ...