在編程的過程中我們經常會需要使用一些小圖標,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>