王多静

这里是我的记事本

导航

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

①打开此网站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新更

官网首页导航也有对如何应用的直接说明

 

posted on 2017-05-17 14:13  王多静  阅读(2246)  评论(0)  编辑  收藏  举报