视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > Html5技术 >

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

时间:2016-08-29 16:09酷播
[html5]字体图标的用法范例 Font Awesome

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

　　　公有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> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器