Font awesome小圖標

在編程的過程中我們經常會需要使用一些小圖標,Font awesome無疑是一個很好的工具,它提供了海量的可供縮放的矢量圖標,具體的可訪問它的官網。

它的使用也很簡單,只需要在你的html頁面引入font-awesome.css,然後當你需要引用小圖標的地方加上類class="fa fa-x"(x爲你所需要的小圖標的名字,具體的可參照官網),

下面是我自己寫的一個簡單的實例,其中我對某些樣式做了重寫。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"/>
      <style>
      
         li{
            list-style: none;
         }
         li .fa{
            color:red;
            color:lightblue;
            cursor: pointer;
         }
         li .fa:hover{
            color:red;
         }
         li .fa{
            font-size: 30px;
         }
      </style>
   </head>
   <body>
      <ul>
         <li><span class="fa fa-search">搜索</span></li>
         <li><span class="fa fa-bars">菜單</span></li>
         <li><span class="fa fa-bomb">炸彈</span></li>
         <li><span class="fa fa-refresh fa-spin"></span><span class="fa">更新</span></li>
         <li><span class="fa fa-glass"></span></li>
      </ul>
   </body>
</html>


發佈了26 篇原創文章 · 獲贊 12 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章