CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)css记录文本图标对齐的几种解决方案CSS拾遗之箭头,目录,图标的实现代码CSS3鼠标滑过图片效果 用Font Awesome库实现悬停图标

进入阿里巴巴矢量图标库

阿里巴巴矢量图标库

• 选择喜欢的图标的，点击添加到库
• 选择完之后，点击右上角的购物车图标（前提是已经登录，推荐使用GitHub登录）
• 然后在右侧中点击添加至项目
• 之后在个人主页中可以看见

1.Unicode
2.Font class

此次便是对于这两个的使用

Unicode

开始进入时，会自动生成代码，如果没有，则点击生成
例:

 @font-face { font-family: 'iconfont'; /* project id 1743720 */ src: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot'); src: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1743720_lf0mzduk11.woff2') format('woff2'), url('//at.alicdn.com/t/font_1743720_lf0mzduk11.woff') format('woff'), url('//at.alicdn.com/t/font_1743720_lf0mzduk11.ttf') format('truetype'), url('//at.alicdn.com/t/font_1743720_lf0mzduk11.svg#iconfont') format('svg'); }

其中最最关键的是iconfont

同时，我们还需要修改其对应的url路径

以第一个举例

 src: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot'); src: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot');

Unicode中对于图标的引用如下

在刚刚的个人页面中，选中Unicode可以看见加入的图标都在下面,以搜索举例

鼠标滑上去以后可以看见复制代码的图标，点击复制

以下为实例代码

 : Hello CSS

效果图

###Font Class中对于图标的引用

这个就要简便很多了

在图标库个人主页的Unicode旁边就是Fonte Class点击，再任选一个图标，复制代码。

 : Hello CSS

更加简便的使用

有时候，一个复杂的网页包含各种图标的引用，例如导航栏每个栏目的前面都要一个图标，这个便用到了了::before,而同样后面有时候又要用span来引用图标，这时，我们便可以引入Font-Class中的使用方法却达到了两种场景的使用

 : Hello CSS

效果便是Hello CSS前后都有搜索图标

原因：打开引入的css我们可以发现其中也包含了Unicode，因此之后的使用只需要引入Font-Class即可，而图标对应的十六进制编码在Unicode中复制，也算是一个小技巧。

总结

到此这篇关于CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)的文章就介绍到这了,更多相关css 阿里巴巴矢量图标库内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！