长春建站_阿里巴巴iconfont图标怎么用？

自从有了阿里巴巴字体图标库 设计小伙儿都变懒了，今天长春建站网站长就和大家分享一点关于如何使用阿里巴巴iconfont字体的方法，希望对于建站中的你有所帮助。iconfont 字体的优点就不用长春建站网站长说了吧，相信小伙伴们都能知道，要是不知道，就自己百度搜索一下吧。

一、简单操作方法：

图标的制作和上传可以参照官网给出的文档：
图标的下载和使用官网上说的不是很清楚，简单介绍下：
1.首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”

2.选择完所有要用的图标后“存储为项目”，给它命名。然后在“图标管理”-“图标应用项目”中找到这个项目，获取在线链接，把里面的代码复制到CSS中。

3.在HTML中需要使用到图标时，使用iconfont类名。

<i class="iconfont">&#xe600;</i>

里面写上你想用的图标下面的Unicode：

4.然后你可以通过控制iconfont类的属性改变图标的样式，比如：

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

就可以在页面中引用和修改了。

官网中还列出了使用时候的兼容性问题及其解决方法：

 

这些图标也可以下载到本地使用。图标都加入暂存架后选择“下载到本地”，会得到以下几个文件：

浏览器打开demo.html可以看到每个图标的Unicode，把iconfont.css里的代码复制到css里面，把下面四个文件放到css可以引用到的文件夹里就可以了。下载使用的一个缺点是添加图标的话要重新把所有图标再下载一遍覆盖原来的文件，如果是在线链接只要重新生成一次链接就好了。

二、专业操作方法：

　　Ionic有个自己的图标库，但是有些需要的图标还是没有，下面长春建站网站长再来介绍一下阿里巴巴的矢量图标库，在Ionic中如何使用的专业方法：

一、选择图标：

1、首先打开阿里巴巴iconfont 网址，你可以选择右上角的搜索，搜索自己要的图标，例如美女

2、也可以选择去图标库自行选择想要的图标

3、选择图标，点击图标变成橘色，即放在暂存架

4、再次点击即可取消，或者在暂存架中鼠标滑过图标，图标右上角有删除小按钮也可删除选中

5、选择好要用的图标后，点击暂存架的下载至本地，解压待用

二、项目引用

1、打开解压的文件夹中的demo.html

2、我们下载的图标可看到了吧，按照demo的步骤，下面我们配置ionic的项目

3、静态文件存放目录，新建font文件夹用来存放字体文件(可自定义存放)

4、css使用font-face声明字体

5、css定义使用iconfont的样式

6、挑选相应图标并获取字体编码，应用于页面就可以显示图标啦

三、Tab及其他标签引用图标

1、大家发现，Ionic的图标只要加个类似ion-happy ion-XXX的class就可以应用相应的图标，那么我们怎么用阿里巴巴的矢量图标呢，不要急也有办法

　　打开直接解压的图标文件中的iconfont.css文件

3、将那些.icon-XXX:before{content:'XXXX'}也复制到你的css文件中去

　　看过ionic css文件源码的童鞋，是不是看到这些有点熟悉呢

3、那就对啦，只要在class中加 iconfont icon-XXX就可以使用图标了

四、Demo

　　长春建站网站长自己动手做了一个demo，下载了一些星座的表情的天气的还有其他的，发现个bug，就是Chrome调试星座、内衣还有雨伞的图标不能显示，放自己的android手机上就可以显示。如果小伙伴还有其他的不能显示的话不用奇怪，可以反映给他们官方微博