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

目录
相关文章
|
11天前
|
图形学 开发者
Unity Text字体颜色渐变
此代码实现文本颜色的垂直渐变效果。通过定义起始和结束颜色,获取像素位置信息(UV坐标),根据渐变方向计算颜色插值,并应用到每个像素上。具体步骤包括:1) 定义颜色范围;2) 获取UV坐标;3) 计算线性插值;4) 应用颜色。脚本挂载在Text组件上,可调节顶部和底部颜色实现渐变效果。
|
9月前
|
前端开发 Serverless UED
iconfont渐变色实现方案总结
iconfont渐变色实现方案总结
514 0
|
8月前
技术笔记:SVG学习之stroke
技术笔记:SVG学习之stroke
108 0
|
前端开发 开发者
前端封装库/工具库的字体/图标之Font Awesome
随着前端技术的不断演进,前端封装库/工具库在Web开发中扮演着越来越重要的角色。其中,字体/图标工具库可以为Web应用程序提供美观、一致和易于管理的图标。而Font Awesome是一个非常受欢迎和广泛使用的字体/图标库。今天我们将探讨一下Font Awesome这个实用工具库。
481 1
|
移动开发 前端开发
h5 video以及img控件加上border显示不全的解决方案!
h5 video以及img控件加上border显示不全的解决方案!
422 0
|
前端开发 CDN
Font-Awesome4.7.0版本字体图标显示问题
在Font-Awesome4.7.0版本有时可能会出现字体图标显示为空白小方框的情况,本文提供一个解决思路
1334 0
Font-Awesome4.7.0版本字体图标显示问题
|
开发者
Font-Awesome如何引入矢量字体图标
在开发网页的过程中,我们会经常需要用到一些小图标来进行形象地说明解释或者装饰网页,但是传统的图片引用方式引入的的是图像图标,不易修改,而矢量字体图标则能很好地解决这一问题,因为矢量字体图标的本质是字体,可以使用“<style>”标签对其属性进行修改,非常方便,已经被广泛应用于网页开发中!本文主要介绍font-awesome-4.7.0的引入和使用
423 0
Font-Awesome如何引入矢量字体图标
Flutter 125: 图解自传 ACE_ICON.ttf 图标库
0 基础学习 Flutter,第一百二十五步:简单了解自定义图标库!
384 0
Flutter 125: 图解自传 ACE_ICON.ttf 图标库
|
前端开发
把 SVG 图标对齐到文本,以告别字体图标(Font Icons)的时代
本文讲的是把 SVG 图标对齐到文本,以告别字体图标(Font Icons)的时代,在字体图标盛行的时代,推行 SVG 图标可谓是 Web 社区中的一次重要契机。毕竟,使用 SVG 图标系统能更好地遵循图形的访问性标准,并渲染出更高质量的图像。
4228 0

热门文章

最新文章