阿里巴巴iconfont正确的使用方式是什么?

html-css09

阿里巴巴iconfont正确的使用方式是什么?,第1张

对于正确使用阿里巴巴iconfont想必大家都有一定的了解，但是详细的使用方式我想大家都是大同小异的吧，那么我就把它告诉大家，以便大家方便使用。

具体使用方法如下：

1.首先在I阿里巴巴iconfont矢量图标库这个页面上把你需要的相应图标随后就会点击购物车按钮加入暂存架；

2.其次就是选择完你所需要所有要用的图标后，这时你就需要给它命名。然后你还要在图标管理所对应的图标应用项目中，最后找到这个项目，获取在线链接，把里面的代码复制到CSS中；

3.完成以上步骤后在HTML中需要使用到图标时，使用iconfont类名。

4.最后就是你可以通过控制iconfont类的属性改变图标的样式。

这样你就完成了你所需的相关需求，通过以上操作，你可以轻松完成。那为什么我们要使用阿里巴巴iconfont，其实也不难发现，顾名思义iconfont也就是把图标用字体的方式呈现,其优点在于以下几个方面:首先可以通过css的样式改变其颜色，其实不是专业人士是很难搞定的，其次就是相对于图片来说,具有更高的分辨率，最后就是它拥有更小的存储，对于我们来说非常方便，所以这就是它的优点所在。任何东西的使用都有它的两面性，它的缺点就是浏览器兼容性不够普及,所幸目前大部分主流浏览器都支持。

但是只要你学会了使用的方法就会很快上手，所以说现在的科技也是有它的好处，使用它的方法其实就是你根据方法进行操作，那么你就会很快，学习这些并不是一成不变的，所以祝你早日学会。

需要把图标换成字体图标,阿里巴巴图标库可以把图标转成字体图标，自定义的图标需要用svg然后转换。

下载出来引用字体图标样式。在样式表中引用字体图标

@font-face {

font-family: "aui_iconfont"

src: url('aui-iconfont.2.0.ttf') format('truetype')

}//字体引用方式

arrow-left:before { content: "\e6eb"}//字体图标的命名和生成的字体

把字体图标的命名引用到对应的div即可<div class="aui-iconfont aui-icon-left"></div>生成如下效果图。

可以使用背景图设置，使用背景精灵图 把图标放在一张图片上面，通过定位位移来找到图片。

切成小图标 一个位置对应一个图标。

图标的制作和上传可以参照官网给出的文档：Page 1图标的下载和使用官网上说的不是很清楚，简单介绍下：1.首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”2.选择完所有要用的图标后“存储为项目”，给它命名。然后在“图标管理”-“图标应用项目”中找到这个项目，获取在线链接，把里面的代码复制到CSS中。3.在HTML中需要使用到图标时，使用iconfont类名。<i class="iconfont"></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

}

就可以在页面中引用和修改了。官网中还列出了使用时候的兼容性问题及其解决方法：Page 2这些图标也可以下载到本地使用。图标都加入暂存架后选择“下载到本地”，会得到以下几个文件：浏览器打开demo.html可以看到每个图标的Unicode，把iconfont.css里的代码复制到css里面，把下面四个文件放到css可以引用到的文件夹里就可以了。下载使用的一个缺点是添加图标的话要重新把所有图标再下载一遍覆盖原来的文件，如果是在线链接只要重新生成一次链接就好了。