简单介绍一下阿里巴巴矢量图标库的使用
2016-11-05 00:00
471 查看
相信做过前端的都知道阿里巴巴矢量图标库,这是一个非常好用的添加小图标的方法,而且是完全免费的,可以在线使用也可以下载到本地使用,而且图标是作为字体插入,不仅可以改变颜色大小,而且在布局方面也非常方便。下面我就来介绍一下阿里巴巴矢量图标库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">3</i>中间的就可以了。
第三,当你登录阿里巴巴矢量图标库之后,可以在加入购物车之后选择添加至项目,就可以添加到你在图标库中的项目里,然后在图标管理,我的项目里可以查看,然后点击查看在线链接,把链接的那段代码添加到你的css文件中,就可以在线使用你的项目中的图标了,再添加时只需要重新获取链接就可以了;不过我在做这个的时候发现图标并没有出现,而是出现了两个小框框,后来经过一系列惨烈的虐心尝试,找到了解决办法:(1)本地测试的时候要放在服务器里 ;(2)要在css文件里添加一段代码 :
对,就是得设置样式,要不没有办法显示,我们在要修改图标颜色大小时也要注意权重问题。
今天就说到这里,希望能给大家帮助~
网址: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">3</i>中间的就可以了。
第三,当你登录阿里巴巴矢量图标库之后,可以在加入购物车之后选择添加至项目,就可以添加到你在图标库中的项目里,然后在图标管理,我的项目里可以查看,然后点击查看在线链接,把链接的那段代码添加到你的css文件中,就可以在线使用你的项目中的图标了,再添加时只需要重新获取链接就可以了;不过我在做这个的时候发现图标并没有出现,而是出现了两个小框框,后来经过一系列惨烈的虐心尝试,找到了解决办法:(1)本地测试的时候要放在服务器里 ;(2)要在css文件里添加一段代码 :
.iconfont{ font-family:"iconfont" !important; font-size 7fe0 :16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }
对,就是得设置样式,要不没有办法显示,我们在要修改图标颜色大小时也要注意权重问题。
今天就说到这里,希望能给大家帮助~
相关文章推荐
- 简单介绍一下asp.net中DataGrid的使用(视频教程)
- Git的初次使用 ; Git常用命令查询 ; Git push ; Git pull 2011-12-16 17:32 在介绍安装和简单使用前,先看一下百度百科中的简介吧: ———————————
- Git的初次使用 ; Git常用命令查询 ; Git push ; Git pull 2011-12-16 17:32 在介绍安装和简单使用前,先看一下百度百科中的简介吧: ———————————
- 目前大家对Python都有一个共识,就是他对测试非常有用,自动化测试里Python用途也很广,但是Python到底怎么进行自动化测试呢?今天就简单的向大家介绍一下怎么使用Python进行自动化测试
- 简单的介绍一下C中申请的内存空间,free的使用
- Ionic使用Iconfont-阿里巴巴矢量图标库
- WPF使用矢量字体图标(阿里巴巴iconfont)
- iconfont使用的三种方式(阿里巴巴矢量图标库代码使用)
- 使用阿里巴巴矢量图标库下载所需的小图标
- 阿里巴巴矢量图标库使用
- 阿里巴巴矢量图标的使用Demo
- Android 开发中 阿里巴巴矢量图标库 IconFont的使用详解
- 简单介绍一下TPshop商城使用,TPshop商城使用的安装--windows环境
- Druid数据库连接池简单使用介绍
- 矢量动画的介绍和使用
- dubbo学习过程、使用经验分享及实现原理简单介绍
- logging模块的简单使用以及tornado中的log简单介绍
- 使用 NodeJS+Express 开发服务端的简单介绍
- hzk16的介绍以及简单的使用方法
- 【Eigen】Eigen介绍及简单使用