如何在HTML中使用圖標字體 - icon font?

主要特性

使用icon font來生成圖標相對於基於圖片的圖標來說，有如下的好處：

• 自由的變化大小
  

• 自由的修改顏色
  

• 添加陰影效果
  

• IE6也可以支持
  

• 支持圖片圖標的其它屬性，例如，透明度和旋轉等等
  

• 可以添加text-stroke和background-clip:text等屬性，只要瀏覽器支持
  
  

如何使用？
文字修飾：

1. <font color="Black">    <h3>
   
2.       <span aria-hidden=”true” data-icon=”⇝”></span>
   
3.       Stats
   
4.     </h3>
   
5.     [data-icon]:before {
   
6.       font-family: icons; /* BYO icon font, mapped smartly */
   
7.       content: attr(data-icon);
   
8.       speak: none; /* Not to be trusted, but hey. */
   
9.     }</font>

複製代碼

單獨圖標：

1. <font color="Black">    <a href=”#”>
   
2.       <span aria-hidden=”true” data-icon=”▨”></span>
   
3.       <span>RSS</span>
   
4.     </a>
   
5.     /* Same CSS as above, plus */
   
6.     .icon-alone {
   
7.       display: inline-block; /* Chrome 19 was weird with clickability without this */
   
8.     }
   
9.     .screen-reader-text { /* Reusable, toolbox kind of class */
   
10.       position: absolute;
    
11.       top: -9999px;
    
12.       left: -9999px;
    
13.     }</font>

複製代碼

創建你自己的icon font - IcoMoon

如果大家需要創建自己的iconfont，推薦使用iconmoon，使用它你可以通過上傳SVG或者字體來生成你需要的icon字體，本文在線演示使用iconmoon生成。

步驟1：選擇他們提供的或者上傳自己的

步驟2：下載下來

然後我們解壓下看看文件

index.html就是樣例，font裏就是字體

好了這樣你就可以使用圖標字體了，可以根據自己的需要修改index文件。

本站演示效果：在線手冊

來源：PHP小鎮