inspinia前端模板怎样修改图标-蒲公英云

inspinia前端模板怎样修改图标

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

场景

inspinia前端模板官网：

http://cn.inspinia.cn/layouts.html

离线版2.8下载：

https://download.csdn.net/download/badao_liumang_qizhi/11262544

现在要修改其图标。

官方修改文档：

http://cn.inspinia.cn/icons.html

实现

<button id="resetBtn" class="btn btn-info mt-2" type="button"><i class="fa fa-reply"></i> 重置</button>
<button id="searchBtn" class="btn btn-info mt-2" type="button"><i class="fa fa-search"></i> 搜索</button>

图标效果

![Image 1][]

通过添加”来添加图标

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 ![Image 1][]

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

Font Awesome

官网：

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>