主题菜单设置旋转小图标(萌糖阁原创首发)

请将网站小图标下载至网站本地具体路径自行创建,推荐阿里巴巴矢量图 https://www.iconfont.cn/

登录账号选择自己需要的图标后点击下载,下载可以选择svg或者png格式的图片,

下方有两种使用方法,个人推荐将svg或png格式的图标下载到本地使用显示速度快,

代码使用

方法1:本地图标引导代码

<img class="figure" src="/图片.svg">

将上方代码加入到菜单中或需要显示的地方即可

方法2:无需下载图标到本地,直接使用阿里巴巴矢量图标代码显示

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

上方是阿里巴巴官方代码,其中icon-73是阿里巴巴矢量图 图标代码,将整个代码加入到需要显示的地方

这里需要说明,请先到阿里巴巴矢量图官网点击Symbol获取 js 添加到主题后台自定义底部html框内,然后在添加上方图标显示代码,

接下来添加下方css代码(两种方式都需要添加css)

2.旋转css代码

将上方css代码添加到主题后台自定义css中,其他主题如后台没有自定义css请加入全局css文件中,

其中代码中 width: 15px 是调整图标大小函数

演示

图片[1]-主题菜单设置旋转小图标(萌糖阁原创首发)-梦都歌-精品资源社区,梦都歌资源网
温馨提示:本文最后更新于2024-08-02 23:54:49,某些文章具有时效性,若有错误或已失效,请在下方留言或联系梦歌社长
© 版权声明
THE END
喜欢就支持一下吧
点赞12赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容