阿里巴巴图标的应用

今天研究阿里巴巴图标应用，发现阿里巴巴图标有三百多万个......

网址：http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

下面介绍两种方式应用图标至网站中

1.文件下载保存项目应用法

做法:

先通过搜索框搜索自己需求的图标,点击图标中的购物车加入到购物车中

如下图下载压缩包至本地

解压后发现里面的文件如图

值得注意的是红色框的五个文件，unicode.html里面可以查看到图标的unicode编码，svg和css是图标的样式文件，eot、ttf和woff文件是系统生成的文件，需要将这五个文件放到项目中去应用使用即可

ps:这种方法每次增加新图标时候，文件大小会变大，也就意味着每次新增图标都要修改这五个文件，而这五个文件也是下载的压缩包解压出来的，缺一不可！！！

总结:此方法不是很好的管理项目图标，因为每次添加新图标的时候，五个文件都需要更新.....这就要求做项目时事先把所有的需求图标都罗列进文件里面去！

2.添加至项目应用法

做法:

在自己账号里面新建一个项目，如下图，将选好的图标添加至项目中

点击更新代码，将代码复制替换到iconfont.css文件中去，更改iconfont 为 layui-icon保存

在需要应用图标的地方写上图标unicode即可:

ps:这种方法性能不是很好，因为是通过URL去获取阿里巴巴文件配置中的图标，也有可能阿里巴巴服务器也受影响，不是很稳定！！！

总结:此方法可用需慎用！

原文地址：https://www.cnblogs.com/ButterflyEffect/p/9773698.html

时间： 2024-10-12 13:25:56

阿里巴巴图标的应用的相关文章

在uni-app中使用阿里巴巴图标库字体图标

阿里巴巴图标库 添加图标.下载.引入的使用方法: 1.添加图标 2.下载到字体图标文件后,复制圈中的两个文件到static目录下:         3.新建一个自定义字体图标样式文件: font-icon.css 4.给font-icon.css添加内容  5.font-icon.css具体代码: @font-face { font-family: uniicons; font-weight: normal; font-style: normal; src:url('[email protect

引用阿里巴巴图标库

<!DOCTYPE html><html><head lang="zh-cn"> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport"

iconfont阿里巴巴图标的使用

第一步 使用github(用户名:hujiaoyue123,密码:Lov...04)登录http://iconfont.cn/home/index?spm=a313x.7781069.1998910419.1.19019531AIoim9 第二步 图标管理>我的项目>新建项目 第三步 图标库>添加入库>右上角购物车添加至项目 第四步 查看在线链接>点击复制代码 @font-face { font-family: 'iconfont'; /* project id 385153

阿里巴巴图标库全部下载

方法一: 1:找到自己想要的图标库 2:按F12打开控制台,在console中输入 var iconList = document.querySelectorAll('.icon-gouwuche1'); for (var i = 0; i < iconList.length; i++) { iconList[i].click(); } 方法二: $ npm install iconfonts --save 原文地址:https://www.cnblogs.com/zhaogaojian/p/1

阿里巴巴IconFont的图标的下载使用

目前项目开发都是vue+element-ui模式,由于elementUI的icon图标库种类不多又不好看,所以基本不使用其自带的图标.一般都是引入第三方的图标资源,例如:fontawesome.或者阿里巴巴的iconfont.由于fontawesome的使用,会使得会全部下载所有的图标信息,使得项目变大,因此建议使用阿里巴巴的iconfont图标库.阿里巴巴矢量图标库地址:https://www.iconfont.cn/home/index,里面有丰富的图标资源可选择. 用法: 1.直接下载.p

input框添加图标，代替submit

input框添加图标,代替submit的意思是form表单中,将常规的提交按钮更改成图标,但是图标具有提交的功能 首先,我们先探讨下如何获取图标,我是从阿里巴巴图标库中下载的,因为改版的原因,网上的一些方法并不能保证下载下来完整的代码,所以我来贴一下具体的图片,说明下如何下载代码 进入官网,搜索需要的内容,加入购物车,下载源码步骤不同就在后面 点击添加至项目,选择下载至本地 下载完成后是一个压缩包,解压后,将红色框的字体文件添加到font文件夹,因为大家可以轻而易举的发现,这是四种不同的字体编码

ionic2 +Angular 使用自定义图标

结合阿里巴巴矢量图标库实现在ionic2开发中使用自定义图标. step1:在阿里巴巴图标管理中新建项目,并添加自己选中的图标到购物车: step2:将购物车中的图标"添加至项目": step3:打开"我的项目,选择图片进行编辑.根据项目需求.如果所有的图标名称前半部分都设置成统一的名称的话,只需要在图标编辑是填入后半部分名称. step4:步骤三中的统一名称可以在"更多操作"--"编辑项目"中设置. 我这边在项目中统一使用iOS模式

【css】最近使用的两种图标字体库

## 0. 前言 比较基础的图标加载:<img src="x.png">和块元素的背景background: url(./x.png). 页面多图标时,使用雪碧图(多个png压缩成一个png,定位来使用),减少图片所占空间. 大屏显示,为保证图标清晰度,可以使用svg格式的图片.svg是矢量图,直接更改svg代码中path的fill改变颜色. 可自编辑开源svg库 [http://www.iconfont.cn/home/index](http://www.iconfont

css字体图标的制作

我介绍的这个办法是直接在 "阿里巴巴图标库"中制作的,方便快捷 1. 首先到 "阿里巴巴图标库"中找到你想要的图片,然后选择加入购物车 接着我们点击右上角的购物车,你会看右下角有"下载代码",点击它,就成功了第一步了,拿到了css的字体图标了 2.打开你下载下来的那个文件夹,其实有用的就我用红色笔圈到的那一部分,其他的你也可以看看 然后,把iconfont.css文件引入页面,(或者把iconfont.css的代码拷贝到你的css文件中,这样子的