场景
Font Awesome
一套绝佳的图标字体库和CSS框架
官网:
/
实现
从官网下载资源文件,解压后的目录
将上面解压后的四个目录复制到项目存放静态资源的目录下,这里是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框架的使用》对你有帮助,请点赞、收藏,并留下你的观点哦!