使⽤阿⾥巴巴图标库⽣成iconfont字体图标iconfont字体图标就是⽤字体来代替图标、图⽚⽂件的做法，并且通过字体图标可以对图标的⼤⼩、颜⾊等进⾏控制，但是缺点就是只能实现⼀种颜⾊，不能像图⽚那样含有各种颜⾊。
通过阿⾥巴巴图标库制作字体图标步奏如下（默认已注册阿⾥巴巴图标库）：
1、⾸先搜索所要展⽰的图⽚，到后点击⼊库。
2、点击⼊库的图标，结果如下图所⽰，选择添加⾄项⽬或点新建项⽬。
3、点击确定之后如下图所⽰，⿏标悬浮在上⾯可以选择对图标信息进⾏修改。
4、选择Font class，点击下载⾄本地便把字体编辑好了。
5、结下来是使⽤字体，选中⽣成的字体添加⾄项⽬⼯程中。
6.修改css⽂件引⽤⽣成的字体
iconfont.css内容如下：
[html] view plain copy print?
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>postMessage解决跨域、跨窗⼝消息传递</title>
6. <style type="text/css">
7. @font-face {font-family: "iconfont";
8. src: url('?t=1483950473775'); /* IE9*/
9. src: url('?t=1483950473775#iefix') format('embedded-
opentype'), /* IE6-IE8 */
10. url('fonts/iconfont.woff?t=1483950473775') format('woff'), /* chrome, firefox */
11. url('f?
t=1483950473775') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
12. url('fonts/iconfont.svg?t=1483950473775#iconfont') format('svg'); /* iOS 4.1- */
13. }
14.
15. .iconfont {
16. font-family:"iconfont" !important;
17. font-size:16px;
18. font-style:normal;
19. color: lightblue;
20. -webkit-font-smoothing: antialiased;
21. -moz-osx-font-smoothing: grayscale;
22. }
23.
24. .icon-xingzuotianchengzuo:before { content: "\e672"; }
25.
26. @font-face {font-family: "iconfont";
27. src: url('?t=1483951178754'); /* IE9*/
28. src: url('?t=1483951178754#iefix') format('embedded-
opentype'), /* IE6-IE8 */
29. url('fonts/iconfont2.woff?t=1483951178754') format('woff'), /* chrome, firefox */
30. url('f?
icon图标库
t=1483951178754') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
31. url('fonts/iconfont.svg?t=1483951178754#iconfont') format('svg'); /* iOS 4.1- */
32. }
33.
34. .icon-star:before { content: "\e602"; }
35. </style>
36. </head>
37. <body>
38. <div >
39. <i class="iconfont icon-xingzuotianchengzuo"></i>
40. <i class="iconfont icon-star"></i>
41.
42. </div>
43. </body>
44. </html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论