如何使用阿里巴巴iconfont矢量圖片

本文轉載自查看原文 2017-05-17 14:13 1651

①打開此網站http://www.iconfont.cn/ , 選擇需要的幾個圖形 → 加入購物車 → 添加至項目 → 給項目隨便命名 → 點擊電線連接並點擊代碼 → 復制代碼到css

②在body里寫有插入的表情, 兩種表示 , 所有代碼如下

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta name="" charset="utf-8" content=""/>
 5         <title></title>
 6     </head>
 7     
 8     <style type="text/css">       
 9     @font-face {
10         font-family: 'iconfont';  /* project id 304378 */
11         src: url('//at.alicdn.com/t/font_0j1vc2takv3x47vi.eot');
12         src: url('//at.alicdn.com/t/font_0j1vc2takv3x47vi.eot?#iefix') format('embedded-opentype'),
13         url('//at.alicdn.com/t/font_0j1vc2takv3x47vi.woff') format('woff'),
14         url('//at.alicdn.com/t/font_0j1vc2takv3x47vi.ttf') format('truetype'),
15         url('//at.alicdn.com/t/font_0j1vc2takv3x47vi.svg#iconfont') format('svg');
16     }
17     .iconfont{                
18         font-family:"iconfont";                
19         font-size:19px;                
20         font-style:normal;            
21     }            
22     .icon-tel:before{                
23         content: "\e760";            
24     }
25     .iconfont{
26         color:#ff0;
27         background:blue;
28     }
29     </style>
30     <body>        
31         
32         <ul>
33             <li class="iconfont icon-tel"><span>這是一個冬天</span></li>
34             <li class="iconfont">&#xe760;</li>
35         </ul>        
36     </body>
37 </html>

View Code

src: url('iconfont.eot'); /* 兼容IE9*/

src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* 兼容IE6-IE8 */

url('iconfont.woff') format('woff'),/* 兼容chrome、firefox */

url('iconfont.ttf') format('truetype'),

/* 兼容chrome、firefox、opera、Safari, Android, iOS 4.2+*/

url('iconfont.svg#iconfont') format('svg'); /* 兼容iOS 4.1- */

③注意:

1注意兩種方法 :

  <li class="iconfont icon-tel"><span>這是一個冬天</span></li>
  <li class="iconfont">&#xe760;</li>

2注意寫法

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

④hover事件直接寫

.iconfont:hover{ 
    color:blue; 
    background:red;
}

2018-08-30新更

官網首頁導航也有對如何應用的直接說明

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。