9、阿里巴巴矢量图库icon-font的运用

简介: 前言:今天说下在项目中的使用图标库GitHub:https://github.com/Ewall1106/mall一、新建图标项目1、打开阿里巴巴矢量图库这个网站,进入图标管理中,在里面新建一个项目iconfont官网2、然后...

前言:今天说下在项目中的使用图标库
GitHub:https://github.com/Ewall1106/mall

一、新建图标项目

1、打开阿里巴巴矢量图库这个网站,进入图标管理中,在里面新建一个项目

img_b4a22479f0b3996098264111daa6828b.png
iconfont官网

2、然后我们进入图标库中添加几个图片到购物车中

img_ff5e9d55a8e7cb69c68a97ba064aee44.png
addCart

3、然后在购物车中将图标添加到项目里面

img_b10d1132fde156c4cd8da7357cb83af9.png
添加到项目

二、下载图标到本地

进入我的项目中,然后下载到本地;
这里有三种不同的方式下载,区别大家可以到官网里面了解更多;

img_de63f2f63732c3c2e78cea44b57e52a7.png
download

三、项目中引入

1、ok,下载完成了以后,除了iconfont.js字体文件对我们没有什么用以外,我们把所有的iconfont复制一下。

img_fc0e4884f5515d7fdd2d445d7855bcee.png
iconfont

2、全部复制到styles目录下

img_c24a2f54734953c89a91778ccf0551df.png
styles

3、然后我们到main.js中全局引入一下
只要引入iconfont.css就可以了

img_c4cd5c3d948dcb5969a00662d4433a06.png
main.js

为什么我们这里路径直接以styles开头的,因为我们在webapck.base.conf.js中的alias中配置下路径,这个细节在前面章节有讲,这里再提一下。

四、使用

1、我们在项目中用一下,随便找个页面,随便写个标签,但class类名要为iconfont

img_209e46fc24af096bd020edb1d18959dc.png
使用

2、span里面的包裹的十六进制码去网站里面拿

img_64de46f8aa2669bfec8ea54d4a092dc9.png
我的项目

3、引入成功没?

img_560f51420467e1fe2ad3408f1a613b37.png
浏览器中查看

ok。

参考学习

https://www.jianshu.com/p/03172908d344
http://www.iconfont.cn

目录
相关文章
|
6月前
|
前端开发 Serverless UED
iconfont渐变色实现方案总结
iconfont渐变色实现方案总结
407 0
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
5月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
6月前
|
前端开发 JavaScript API
使用SVG构建你自己的图标库
使用SVG构建你自己的图标库
|
移动开发 前端开发
h5 video以及img控件加上border显示不全的解决方案!
h5 video以及img控件加上border显示不全的解决方案!
283 0
|
开发者
Font-Awesome如何引入矢量字体图标
在开发网页的过程中,我们会经常需要用到一些小图标来进行形象地说明解释或者装饰网页,但是传统的图片引用方式引入的的是图像图标,不易修改,而矢量字体图标则能很好地解决这一问题,因为矢量字体图标的本质是字体,可以使用“<style>”标签对其属性进行修改,非常方便,已经被广泛应用于网页开发中!本文主要介绍font-awesome-4.7.0的引入和使用
385 0
Font-Awesome如何引入矢量字体图标
|
前端开发 CDN
Font-Awesome4.7.0版本字体图标显示问题
在Font-Awesome4.7.0版本有时可能会出现字体图标显示为空白小方框的情况,本文提供一个解决思路
1281 0
Font-Awesome4.7.0版本字体图标显示问题
|
前端开发
CSS3中引入多种自定义字体(font-face)
CSS3中引入多种自定义字体(font-face)
448 0
CSS3中引入多种自定义字体(font-face)
sketch 如何规范的设置自己的字体样式库( Text styles )
sketch 如何规范的设置自己的字体样式库( Text styles )
sketch 如何规范的设置自己的字体样式库( Text styles )