inspinia前端模板怎样修改图标

Bertha 。 2023-10-18 20:39 2阅读 0赞

## 场景 ##

inspinia前端模板官网：

[http://cn.inspinia.cn/layouts.html][http_cn.inspinia.cn_layouts.html]

离线版2.8下载：

[https://download.csdn.net/download/badao\_liumang\_qizhi/11262544][https_download.csdn.net_download_badao_liumang_qizhi_11262544]

现在要修改其图标。

官方修改文档：

[http://cn.inspinia.cn/icons.html][http_cn.inspinia.cn_icons.html]

## 实现 ##

图标效果

![Image 1][]![20190628101956494.jpg][]

通过添加"<i class="fa fa-reply"></i>来添加图标

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]![Image 1][]

此模板引用的图标样式为：

Font Awesome

官网：

[http://fontawesome.dashgame.com/][http_fontawesome.dashgame.com]

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

根据官方文档修改图标：

<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>

效果：

![Image 1][]![20190628102049987.jpg][]

[http_cn.inspinia.cn_layouts.html]: http://cn.inspinia.cn/layouts.html
[https_download.csdn.net_download_badao_liumang_qizhi_11262544]: https://download.csdn.net/download/badao_liumang_qizhi/11262544
[http_cn.inspinia.cn_icons.html]: http://cn.inspinia.cn/icons.html
[Image 1]: 
[20190628101956494.jpg]: https://img-blog.csdnimg.cn/20190628101956494.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190628102021808.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[http_fontawesome.dashgame.com]: http://fontawesome.dashgame.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190628102033684.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[20190628102049987.jpg]: https://img-blog.csdnimg.cn/20190628102049987.jpg