场景

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框架的使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。