場景

Font Awesome

一套絕佳的圖標字體庫和CSS框架

官網：

http://fontawesome.dashgame.com/

實現

從官網下載資源文件，解壓后的目錄

將上面解壓后的四個目錄復制到項目存放靜態資源的目錄下，這里是springBoot項目，所以將其放在如下目錄

然后就可以像正常引用css文件的方式將css文件引用，這里使用的是thymelaf模板的引用方式。

<link th:href="@{/public/font-awesome/css/font-awesome.css}" rel="stylesheet">

使用時直接參照官方說明，添加class樣式即可。

舉例

?<button id="detailBtn" class="btn btn-info " type="button"><i class="fa fa-eye"></i> 查看</button><button id="delBtn" class="btn btn-info " type="button"><i class="fa fa-trash-o"></i> 刪除</button><button id="submitBtn" class="btn btn-info " type="button"><i class="fa fa-arrow-up"></i> 提交</button><button id="importBtn" class="btn btn-info " type="button"><i class="fa fa-file-excel-o"></i> 導入</button><button id="printBtn" class="btn btn-info " type="button"><i class="fa fa-print"></i> 打印</button><button id="dowloadBtn" class="btn btn-info " type="button"><i class="fa fa-download"></i> 模板下載</button><button id="InOrderBtn" class="btn btn-info " type="button"><i class="fa fa-plus"></i> 生成入庫單數據</button><button id="refreshBt" class="btn btn-info " type="button"><i class="fa fa-refresh"></i> 刷新</button>

效果

?

總結

以上是生活随笔為你收集整理的Font Awesome一套绝佳的图标字体库和CSS框架的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。