排行榜 统计
  • 建站日期:2021-12-1
  • 文章总数:40 篇
  • 评论总数:345 条
  • 分类总数:21 个
  • 最后更新:2月13日

typecho cuteen主题-全站使用阿里巴巴Iconfont图标详细图文教程

本文阅读 2 分钟
首页 typecho 正文
未收录,推送中

一、新建Iconfont项目
接下来我们就一步一步的教大家如何在使用阿里巴巴Iconfont图标

Iconfont 支持GitHub帐号登录,登录之后你就可以寻找自己需要的图标啦

首先呢,寻找自己的需要的图标,通通点进购物车!
Snipaste_2021-12-15_21-12-51.png

Snipaste_2021-12-15_21-14-58.png

Snipaste_2021-12-15_21-16-19.png
Snipaste_2021-12-15_21-16-35.png

二、网站集成
使用 Iconfont图标 图标官方也有详细的教程,同时官网提供三种集成方式:Unicode、class、Symbol。这三种集成方式各有优劣势,具体请查看官方教程

这里我推荐使用 Symbol 的方式集成到网站中,当然你也按照官方的教程使用其它方式集成

第一步:将刚刚新建的项目生成 Symbol 接入链接,并复制
Snipaste_2021-12-15_21-20-34.png
第二步:将代码保存到主题设置

将以下代码中的链接替换为您刚刚复制的链接,然后 进入 主题设置-自定义代码-自定义底部代码 ,粘贴后保存主题设置

<script src="//at.alicdn.com/t/font_1706672_oa811wlg9gl.js"></script>

简单吧!网站集成 Iconfont图标 就已经全部搞定了!接下来就是使用 Iconfont图标 了!
三、使用 Iconfont图标
在已经添加到你项目中查找图标并复制图标代码,然后按照下面的格式替换href="#iconxxx"中的图标代码,将代码插入到你需要显示图标的地方!

<svg class="icon" aria-hidden="true"><use xlink:href="#iconxxx"></use></svg>

还是按照在导航菜单中添加图标为例:
Snipaste_2021-12-15_21-14-58.png
点击复制代码

最后就是教程结束了,自己看我前台的阿里图标

本文来自投稿,不代表本站立场,如若转载,请注明出处:http://bijilu.com/archives/125/
-- 展开阅读全文 --
Typecho如何制作一个每天自动更新60s页面
« 上一篇 12-15
typecho cuteen主题设置百度自动推送
下一篇 » 12-15

发表评论

成为第一个评论的人

作者信息

动态快讯

换一换
    请配置好页面缩略名选项

热门文章

最多点赞

1赞, 阅读:17
1赞, 阅读:40
0赞, 阅读:163
0赞, 阅读:96

标签TAG

热评文章