【教程】handsome自定义扩充iconfont图标进阶

博主：听闻
发布时间：2022 年 02 月 05 日
1543 次浏览
4 条评论
657字数
分类： ☀️handsome魔改

效果展示：

1.去阿里巴巴矢量库选择自己喜欢的图标

官网选择自己喜欢的图标，尽量每个类目都能有。方便后期使用。
不清楚怎操作可以看上一期文章

【教程】handsome自定义扩充iconfont图标及配色教程

转载自简记小屋handsome图标介绍handsome主题在配置文档中一共介绍了四种图标库的引入配置方法，分别是1...

2.在项目文件里，生成symbol代码

<script src="此处替换你复制的symbol代码"></script>

把修改好的symbol代码在handsome后台的开发者设置/自定义输出head头部的HTML代码

3.图标css样式

此处内容需要评论回复后（审核通过）方可阅读。

把css代码在handsome后台的开发者设置/自定义 CSS

4.选择要使用的图标,获取代码,替换名称即可

此处内容需要评论回复后（审核通过）方可阅读。

5. 展示

6.更新矢量图库

更新矢量图库需要更新一下symbol代码，
handsome后台的开发者设置/自定义输出head头部的HTML代码即可。

最后修改：2022 年 02 月 26 日

© 允许规范转载

如果你喜欢，请随意赞赏

4 条评论

云曦
2024-3-7 17:31:32

滴！学生卡！打卡时间：17:31:31，请上车的乘客系好安全带~

回复
刚下飞机的女孩
2023-8-2 11:03:13

滴！学生卡！打卡时间：11:02:14，请上车的乘客系好安全带~

回复
挺胸的贫僧
2022-12-24 16:33:13

学习

回复
问泽卌
2022-3-5 13:51:29

滴！学生卡！打卡时间：下午1:50:23 写得好好哟,我要给你生猴子！ ::AL001:10:: ，请上车的乘客系好安全带~

回复

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址 *

【教程】handsome自定义扩充iconfont图标进阶

听闻 • 2022 年 02 月 05 日

<h1>效果展示：</h1><svg class="qlicon" aria-hidden="true">    
<use xlink:href="#icon-hongbao"></use></svg><svg class="qlicon" aria-hidden="true">    
<use xlink:href="#icon-fudai"></use></svg><svg class="qlicon" aria-hidden="true">    
<use xlink:href="#icon-cunqianguan-licai"></use></svg><svg class="qlicon" aria-hidden="true">    
<use xlink:href="#icon-zhongguojie"></use></svg><svg class="qlicon" aria-hidden="true">    
<use xlink:href="#icon-shouhuixiangrikui"></use></svg><svg class="qlicon" aria-hidden="true">    
<use xlink:href="#icon-shouhuiliwu"></use></svg><svg class="qlicon" aria-hidden="true">    
<use xlink:href="#icon-a-lvseaixinxihuanxiaizuiai"></use></svg><svg class="qlicon" aria-hidden="true">    
<use xlink:href="#icon-a-gangqinleqiyinle"></use></svg><h2>1.去阿里巴巴矢量库选择自己喜欢的图标</h2><p><span class="external-link"><a class="no-external-link" href="https://www.iconfont.cn/" target="_blank"><i data-feather="external-link"></i>官网</a></span>选择自己喜欢的图标，尽量每个类目都能有。方便后期使用。<br>不清楚怎操作可以看上一期文章<br><div class="preview">
<div class="post-inser post box-shadow-wrap-normal">
<a href="https://sangxuesheng.com/archives/340.html" target="_blank" class="post_inser_a no-external-link no-underline-link">
<div class="inner-image bg" style="background-image: url(https://pic.imgdb.cn/item/61fd05eb2ab3f51d91807029.jpg);background-size: cover;"></div>

<div class="inner-content" >
<p class="inser-title">【教程】handsome自定义扩充iconfont图标及配色教程</p>
<div class="inster-summary text-muted">
转载自简记小屋handsome图标介绍handsome主题在配置文档中一共介绍了四种图标库的引入配置方法，分别是1...
</div>
</div>
</a>

</div>

</div></p><h2>2.在项目文件里，生成symbol代码</h2><pre><code>&lt;script src=&quot;此处替换你复制的symbol代码&quot;&gt;&lt;/script&gt;</code></pre><p>把修改好的symbol代码在<code>handsome后台的开发者设置/自定义输出head头部的HTML代码</code></p><h2>3.图标css样式</h2><p><div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div></p><p>把css代码在<code>handsome后台的开发者设置/自定义 CSS</code></p><h2>4.选择要使用的图标,获取代码,替换名称即可</h2><p><div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div></p><h2>5. 展示</h2><p></br></p><svg class="qlicon" aria-hidden="true">    
<use xlink:href="#icon-hongbao"></use></svg><svg class="qlicon" aria-hidden="true">    
<use xlink:href="#icon-fudai"></use></svg><svg class="qlicon" aria-hidden="true">    
<use xlink:href="#icon-cunqianguan-licai"></use></svg><svg class="qlicon" aria-hidden="true">    
<use xlink:href="#icon-zhongguojie"></use></svg><svg class="qlicon" aria-hidden="true">    
<use xlink:href="#icon-shouhuixiangrikui"></use></svg><svg class="qlicon" aria-hidden="true">    
<use xlink:href="#icon-shouhuiliwu"></use></svg><svg class="qlicon" aria-hidden="true">    
<use xlink:href="#icon-a-lvseaixinxihuanxiaizuiai"></use></svg><svg class="qlicon" aria-hidden="true">    
<use xlink:href="#icon-a-gangqinleqiyinle"></use></svg><p></br></p><h2>6.更新矢量图库</h2><p></br><br>更新矢量图库需要更新一下symbol代码，<br><code>handsome后台的开发者设置/自定义输出head头部的HTML代码</code>即可。</p>