大家好,欢迎来到IT知识分享网。
一、引用线上图标库
1.登录阿里巴巴矢量图标库(可以微博登录),鼠标悬停在需要的图标,点击收藏入库(购物车图标),点击下载到本地或添加到项目
搜索你需要的图标并加入购物车
选好之后选择储存为新项目
生成在线链接,并复制到css中即可使用。(这个是必须的,只有生成unicode编码才能在所需的样式中引用图标)
下载本地解压后的文件(有三种字体图标的用法fontclass/symbol/unicode)
注意:在本地调试的时候(就是当你的浏览器网址是file协议开头的时候),
url(//)
里双斜杠之前记得加上https:
,像这样url(https://at.alicdn.com...)
,
不然会用file协议访问链接就找不到。
二. 范例:
1.线上
<head>
2 <meta charset="UTF-8">
3 <title>矢量图</title>
4 <style>
5
6 // 引用线上的图标库(我们在网站上生成的所选字体图标Unicode的编码引用在我们所需的页面中)
7
8 @font-face {
9 font-family: 'iconfont'; /* project id 238765 */
10 src: url('//at.alicdn.com/t/font_pzihjs6e7ki6bt9.eot');
11 src: url('//at.alicdn.com/t/font_pzihjs6e7ki6bt9.eot?#iefix') format('embedded-opentype'),
12 url('//at.alicdn.com/t/font_pzihjs6e7ki6bt9.woff') format('woff'),
13 url('//at.alicdn.com/t/font_pzihjs6e7ki6bt9.ttf') format('truetype'),
14 url('//at.alicdn.com/t/font_pzihjs6e7ki6bt9.svg#iconfont') format('svg');
15 }
16
17
18 //图标样式(这个是字体图标的样式,直接复制粘贴即可或在下载到的本地中也可查看,可对图标样式进行修改达到我们想要的结果)
19 .iconfont {
20 font-family:"iconfont" !important;
21 font-size:16px;
22 font-style:normal;
23 -webkit-font-smoothing: antialiased;
24 -moz-osx-font-smoothing: grayscale;
25 }
26 </style>
27 </head>
28 <body>
29
30 <!--是图标Unicode码-->
31 <!--在任何标签中添加上面所定义的iconfont的样式,在这个标签上就能使用字体图标 -->
<i class="iconfont"></i>
32 <i class="iconfont"></i>
33
34 </body>
2.本地
1 @font-face { 2 font-family: Iconfont; //自定义命名 3 src: url('iconfont.ttf'), //这个路径为本地的相对路径,(需要将我们下载到本地的文件解压复制到项目中并在项目中修改成本地url) 4 url('iconfont.svg'), 5 url('iconfont.woff'), 6 url('iconfont.eot'); 7 } 8 .myiconfont { 9 font-family:"Iconfont" !important; //名字一致 10 font-size:50px; 11 font-style:normal; 12 color:#ccc; 13 -webkit-font-smoothing: antialiased; 14 -moz-osx-font-smoothing: grayscale; 15 } 16 </style> 17 </head> 18 <body> 19 20 <i class="myiconfont"></i> 21 <i class="myiconfont"></i> 22 23 </body>
如有不足请谅解!希望给您带来帮助。
本文参考来自于https://www.cnblogs.com/ICE-Dong/p/7302547.html
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/23795.html