主题编辑使用文档

Author： Color
发布时间：March 15, 2023
1895 views
One comment
971 words
Categories：技术

Loading...

> 主题常见使用方法，标签，小技巧等在此汇总。

<div class="tab-container post_tab box-shadow-wrap-lg">
<ul class="nav no-padder b-b scroll-hide" role="tablist">
<li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" 
aria-controls='tabs-fa47ec6e9e7ad6da76b2f5b77faa0f8e980' role="tab" data-target='#tabs-fa47ec6e9e7ad6da76b2f5b77faa0f8e980'>图标</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-dbb8580c6c9d628b30b45cda308f624b831' role="tab" data-target='#tabs-dbb8580c6c9d628b30b45cda308f624b831'>标签页</a></li>
</ul>
<div class="tab-content no-border">
<div role="tabpanel" id='tabs-fa47ec6e9e7ad6da76b2f5b77faa0f8e980' class="tab-pane fade active in">

<div class="tip inlineBlock warning">

主题 由原来的 `fa fa-` 修改为 `fontello fontello-`，是为了避免与fontawesome库冲突，你可以自行引入该图标库，以便使用更多图标，但是会带来一定的加载体积。其它与其参照类似。
</div>

Fontello：`fontello fontello-picture`
Glyphicon：`glyphicon glyphicon-eur`
Feather：`music`
iconfont：`需引用 css`

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-9ffac845af37b1755d3a502a40470eeb71" aria-expanded="true"><div class="accordion-toggle"><span style="">图片引用</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-9ffac845af37b1755d3a502a40470eeb71" class="collapse in collapse-content"><p></p>

![Fontello图标](https://so.believe.com.cn/usr/uploads/2023/03/3362218872.jpg)

<p></p></div></div></div>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e5cd41fc74e0bf84f85799a0de4aa7643" aria-expanded="true"><div class="accordion-toggle"><span style="">链接引用</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-e5cd41fc74e0bf84f85799a0de4aa7643" class="collapse in collapse-content"><p></p>

<button class=" btn m-b-xs btn-primary btn-addon" onclick="window.open('https://v3.bootcss.com/components/#glyphicons','_blank')"><i class="fontello fontello-angle-double-right"></i>Glyphicons</button> <button class=" btn m-b-xs btn-light btn-addon" onclick="window.open('https://feathericons.com/','_blank')"><i class="fontello fontello-angle-double-right"></i>Feather</button> <button class=" btn m-b-xs btn-dark btn-addon" onclick="window.open('https://www.iconfont.cn','_blank')"><i class="fontello fontello-angle-double-right"></i>iconfont</button>

<p></p></div></div></div>

</div><div role="tabpanel" id='tabs-dbb8580c6c9d628b30b45cda308f624b831' class="tab-pane fade  ">

占位... ...

</div>
</div>
</div>

Last modification：March 15, 2023

© Allow specification reprint

如果觉得我的文章对你有用，请随意赞赏

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Comment *

Private comment

Name *

🎲

Email *

Site

墨竹
加油，主题改的挺好看的。
刚下飞机的大黄
终于把我这几年的困惑给搞懂了，感谢博主。

今日已经过去小时

这周已经过去天

本月已经过去天

今年已经过去个月

主题编辑使用文档

Color • 2023 年 03 月 15 日

Loading...

> 主题常见使用方法，标签，小技巧等在此汇总。

<div class="tab-container post_tab box-shadow-wrap-lg">
<ul class="nav no-padder b-b scroll-hide" role="tablist">
<li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" 
aria-controls='tabs-fa47ec6e9e7ad6da76b2f5b77faa0f8e980' role="tab" data-target='#tabs-fa47ec6e9e7ad6da76b2f5b77faa0f8e980'>图标</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-dbb8580c6c9d628b30b45cda308f624b831' role="tab" data-target='#tabs-dbb8580c6c9d628b30b45cda308f624b831'>标签页</a></li>
</ul>
<div class="tab-content no-border">
<div role="tabpanel" id='tabs-fa47ec6e9e7ad6da76b2f5b77faa0f8e980' class="tab-pane fade active in">

<div class="tip inlineBlock warning">

主题 由原来的 `fa fa-` 修改为 `fontello fontello-`，是为了避免与fontawesome库冲突，你可以自行引入该图标库，以便使用更多图标，但是会带来一定的加载体积。其它与其参照类似。
</div>

Fontello：`fontello fontello-picture`
Glyphicon：`glyphicon glyphicon-eur`
Feather：`music`
iconfont：`需引用 css`

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-9ffac845af37b1755d3a502a40470eeb71" aria-expanded="true"><div class="accordion-toggle"><span style="">图片引用</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-9ffac845af37b1755d3a502a40470eeb71" class="collapse in collapse-content"><p></p>

![Fontello图标](https://so.believe.com.cn/usr/uploads/2023/03/3362218872.jpg)

<p></p></div></div></div>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e5cd41fc74e0bf84f85799a0de4aa7643" aria-expanded="true"><div class="accordion-toggle"><span style="">链接引用</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-e5cd41fc74e0bf84f85799a0de4aa7643" class="collapse in collapse-content"><p></p>

<button class=" btn m-b-xs btn-primary btn-addon" onclick="window.open('https://v3.bootcss.com/components/#glyphicons','_blank')"><i class="fontello fontello-angle-double-right"></i>Glyphicons</button> <button class=" btn m-b-xs btn-light btn-addon" onclick="window.open('https://feathericons.com/','_blank')"><i class="fontello fontello-angle-double-right"></i>Feather</button> <button class=" btn m-b-xs btn-dark btn-addon" onclick="window.open('https://www.iconfont.cn','_blank')"><i class="fontello fontello-angle-double-right"></i>iconfont</button>

<p></p></div></div></div>

</div><div role="tabpanel" id='tabs-dbb8580c6c9d628b30b45cda308f624b831' class="tab-pane fade  ">

占位... ...

</div>
</div>
</div>