文档章节

简单介绍一下阿里巴巴矢量图标库的使用

打小就干净
 打小就干净
发布于 2016/11/05 11:25
字数 1147
阅读 1494
收藏 0

相信做过前端的都知道阿里巴巴矢量图标库,这是一个非常好用的添加小图标的方法,而且是完全免费的,可以在线使用也可以下载到本地使用,而且图标是作为字体插入,不仅可以改变颜色大小,而且在布局方面也非常方便。下面我就来介绍一下阿里巴巴矢量图标库Iconfont。 

网址:http://www.iconfont.cn/plus


Iconfont之前只包括官方图标库和所有图标库,现在改版又多了个多色图标库,这个暂时没用过,用过再来讲,这里我一般都选所有图标库。

点进去之后在上面有一个搜索框,可以输入关键字搜索,比如输入:“主页”,就会出现代表主页的图标;这个图标会有很多,大家要注意是线条的还是填充的。
找到你想要的图标之后你可以有三种选择:

第一,将想要的图标保存成图片格式下载到本地,一般有三种格式,SVG下载,AI下载,PNG下载;

SVG格式是可缩放的矢量图形,用来定义用于网络的基于矢量的图形;因为图像是矢量图,在改变尺寸时图形质量不会有所损失;

AI格式是指在Adobe Illustrator的软件中制作的矢量图,但是只能在特定软件中打开,也可在PS中打开,不过打开后显示的不是矢量图,而是位图,不是用于设计的一般用不上;

所以较为常用的是存储为PNG格式,作为图片插入;

第二:当你需要下载多个小图标时,将选好的图标统一加入购物车,加入购物车后点击下载代码,就可以下到本地使用了。这一步从前不需要登录,但是现在改版了,需要先登录才可以操作,然后它有一个缺点,就是如果你想要添加几个图标的话需要重新下载所有的,当然,也不是没有解决办法办法的,可以下载新的之后,在css文件夹里再创建一个文件夹,在里面再写一个css外联样式表用来操作新的小图标,不过这样似乎有点劳师动众,而且文件夹里再嵌套文件夹,对网页性能也是有影响的;所以如果你不是非要下载到本地的话,可以尝试第三种方法。

使用时,将打包后的zip包解压,里面有三个html文件,打开,里面是在本地使用的三种方法(之前只有Unicode),大家可以在浏览器中打开,按照步骤操作,把里面的两大段代码拷贝到css文件中,然后就不需要再动他们了,这里要说一下,在进行下面操作之前需要先把解压后文件除了开头字母为demo的几个文件外,其他的都拷贝到css文件夹根目录,确保你在使用时能调到这几个文件(可能有些不是必须,但我比较懒,就都拷贝了);这样基本就完成了,你想在页面哪里使用,只要在demo里获取Unicode码,替换<iclass="iconfont">&#x33;</i>中间的就可以了。

第三,当你登录阿里巴巴矢量图标库之后,可以在加入购物车之后选择添加至项目,就可以添加到你在图标库中的项目里,然后在图标管理,我的项目里可以查看,然后点击查看在线链接,把链接的那段代码添加到你的css文件中,就可以在线使用你的项目中的图标了,再添加时只需要重新获取链接就可以了;不过我在做这个的时候发现图标并没有出现,而是出现了两个小框框,后来经过一系列惨烈的虐心尝试,找到了解决办法:(1)本地测试的时候要放在服务器里 ;(2)要在css文件里添加一段代码 :

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

对,就是得设置样式,要不没有办法显示,我们在要修改图标颜色大小时也要注意权重问题。

今天就说到这里,希望能给大家帮助~

© 著作权归作者所有

打小就干净
粉丝 0
博文 1
码字总数 1147
作品 0
北京
私信 提问
设计师必看:8处满足原型设计的矢量图标根据地

做原型设计时,我们往往感觉图标素材不够用,尤其是矢量图标不够。 矢量图标是矢量图的一种,这种图形也叫做绘图图像,是各种设计中比较常用的图片格式之一。因为其是根据几何特性绘制,并且...

jongde
2016/11/15
29
0
「LYIconfont」快捷设置iconfont的工具类

在刚刚接触的时候,每次涉及到、等绘制工作时,都觉得无比繁琐。因为我们需要将尺寸合适的图片格式的素材加入到项目中,设置一系列冗杂的UIImageView相关设置。当然,如果需要在不同分辨率下...

halohily
2017/08/04
0
0
Android多分辨率适配实践【1】使用字体图标(内含两枚神器)

目录 Android多分辨率适配实践【0】基础适配篇(撰写中) Android多分辨率适配实践【1】使用字体图标,精准控制不同分辨率的图标样式(内含两枚神器) Android多分辨率适配实践【2】Iconify...

刘星石
2016/03/02
55
0
9、阿里巴巴矢量图库icon-font的运用

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

Ewall_
2018/06/15
0
0
19、分类详情页之基本页面结构

前言:这章讲下分类页面的撰写,主要是涉及几个知识点:① 编程式路由的运用;② 阿里巴巴矢量图标库;③ vue.js中如何获取屏幕的高度并动态设置元素的高度; Github:https://github.com/Ew...

Ewall_
2018/08/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud 笔记之Spring cloud config client

观察者模式它的数据的变化是被动的。 观察者模式在java中的实现: package com.hxq.springcloud.springcloudconfigclient;import org.springframework.context.ApplicationListener;i...

xiaoxiao_go
昨天
6
0
CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部