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

目录
相关文章
|
5月前
|
前端开发 Serverless UED
iconfont渐变色实现方案总结
iconfont渐变色实现方案总结
125 0
|
15天前
|
前端开发 JavaScript API
使用SVG构建你自己的图标库
使用SVG构建你自己的图标库
|
6月前
|
前端开发
Font Awesome 一套绝佳的图标字体库和CSS框架
Font Awesome 一套绝佳的图标字体库和CSS框架
35 0
|
11月前
|
前端开发 开发者
前端封装库/工具库的字体/图标之Font Awesome
随着前端技术的不断演进,前端封装库/工具库在Web开发中扮演着越来越重要的角色。其中,字体/图标工具库可以为Web应用程序提供美观、一致和易于管理的图标。而Font Awesome是一个非常受欢迎和广泛使用的字体/图标库。今天我们将探讨一下Font Awesome这个实用工具库。
310 1
|
前端开发 CDN
Font-Awesome4.7.0版本字体图标显示问题
在Font-Awesome4.7.0版本有时可能会出现字体图标显示为空白小方框的情况,本文提供一个解决思路
1073 0
Font-Awesome4.7.0版本字体图标显示问题
|
开发者
Font-Awesome如何引入矢量字体图标
在开发网页的过程中,我们会经常需要用到一些小图标来进行形象地说明解释或者装饰网页,但是传统的图片引用方式引入的的是图像图标,不易修改,而矢量字体图标则能很好地解决这一问题,因为矢量字体图标的本质是字体,可以使用“<style>”标签对其属性进行修改,非常方便,已经被广泛应用于网页开发中!本文主要介绍font-awesome-4.7.0的引入和使用
312 0
Font-Awesome如何引入矢量字体图标
|
前端开发 JavaScript 项目管理
比肩阿里Iconfont图库的又一Icon库,太好用了
IconPark图标库是一个通过技术驱动矢量图标样式的开源图标库,可以实现根据单一SVG源文件变换出多种主题, 具备丰富的分类、更轻量的代码和更灵活的使用场景;致力于构建高质量、统一化、可定义的图标资源,让大多数设计师都能够选择适合自己的风格图标,并支持把图标源文件导出为React、Vue2、Vue3、SVG多种形式的组件代码,让开发者使用更高效。
比肩阿里Iconfont图库的又一Icon库,太好用了
|
Web App开发 XML 存储
iconfont 支持全新的彩色字体图标
一直以来,Web 中想要使用矢量的彩色图标只能通过 SVG 的方式,这极大的束缚了用户的想象力,为此,我们一直在不断地探索和尝试。在解决了各种难题之后,今天,我很自豪地宣布,iconfont.cn 成为全球第一个支持彩色字体图标的生产管理平台,这使得我们目前几百万的彩色图标可以无缝切换到新的彩色字体图标技术上,同时也带来了很多激动人心的新特性。
iconfont 支持全新的彩色字体图标
|
C#
WPF使用矢量字体图标(阿里巴巴iconfont)
原文:WPF使用矢量字体图标(阿里巴巴iconfont) 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/lwwl12/article/details/78606747 常用的矢量字体图标:阿里巴巴iconfont,FontAwesome;今天介绍如何在wpf中使用阿里巴巴iconfont矢量图标。
2742 0
|
Web App开发 前端开发 测试技术