宜昌本地软件开发与弱电工程服务商
项目咨询 · 快速响应
您当前的位置： > 博客2 > Html5技术

[html5]字体图标的用法范例 Font Awesome

2016-10-13 00:16:48 点击量:11 标签: 收藏本文

简介：让你可以即时定制的可伸缩矢量图标；

　　　公有302种图标任你选择；

　　　图标的风格，如：大小、颜色、阴影可以通过css样式修改；

　　  支持ie6、7；

图例：

　　

  1. <!DOCTYPE html> 
  2. <html > 
  3. <head> 
  4. <meta charset="UTF-8" /> 
  5. <meta name="author" content="@my_coder"> 
  6. <title></title> 
  7. <!-- 
  8.     方法一：cuplayer.com提示：引入字体、图标样式 
  9.         优点：直接引入css,在html里直接写入对应的css样式名即可，不用查找css样式名对应的值 
  10.         缺点：引入了没有用到的样式，代码冗余 
  11. <link rel="stylesheet" href="css/font-awesome.min.css" /> 
  12. <link rel="stylesheet" href="css/font-awesome-ie7.min.css" />    兼容ie6、7 
  13. --> 
  14.  
  15. <style type="text/css">     
  16.     /* 
  17.         方法二：自定义样式 
  18.             优点：样式文件较小，只写自己需要的样式 
  19.             缺点：需要查找每个样式对应的值，比较繁琐 
  20.     */ 
  21.     @font-face { 
  22.        font-family: 'FontAwesome'; 
  23.        src: url('font/fontawesome-webfont.eot'); 
  24.        src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
  25.                 url('font/fontawesome-webfont.woff') format('woff'),  
  26.                 url('font/fontawesome-webfont.ttf') format('truetype'), 
  27.                 url('font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'),  
  28.                 url('font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); 
  29.        font-weight: normal; 
  30.        font-style: normal; 
  31.     } 
  32.     .icon-home:before{ 
  33.         content: "\f015";    /*'\f015'代表‘家’的图标，每个图标有对应的值，cuplayer.com提示*/ 
  34.     } 
  35.     .icon-home {    /*cuplayer.com提示：兼容ie6、7*/ 
  36.       *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf015;'); 
  37.     } 
  38.  
  39.     li{font-family: 'FontAwesome';font-size:30px;display:block;color:#aaa;line-height:40px;} 
  40.     li:hover{color:#f60;}     
  41. </style> 
  42.  
  43. </head> 
  44. <body> 
  45.     <ul> 
  46.         <li> 
  47.             <span class="icon-home"></span> 首页 
  48.         </li> 
  49.         <li> 
  50.             <span class="icon-smile"></span> 微笑 
  51.         </li> 
  52.         <li> 
  53.             <span class="icon-microphone"></span> 语音 
  54.         </li> 
  55.         <li> 
  56.             <span class="icon-rotate-left"></span> 返回 
  57.         </li> 
  58.         <li> 
  59.             <span class="icon-camera"></span> 相机 
  60.         </li> 
  61.         <li> 
  62.             <span class="icon-globe"></span> 地球 
  63.         </li> 
  64.     </ul>              
  65. </body> 
  66. </html> 

 

上一篇： [html]CSS中:nth-child的用法范例
下一篇： [html5]html5控制CSS3动画播放与暂停源代码
ABOUT US
宜昌农人网络科技有限公司

我们是一家提供综合软件外包与弱电工程服务的技术公司。

业务涵盖定制软件、管理系统、网站、小程序、APP、系统集成、网络布线、监控安防、门禁、机房建设及长期技术维护。

公司地址：湖北省宜昌市伍家岗区东站二路6号三峡（宜昌）大数据产业园海洋馆二楼A203室