您现在的位置是：网站首页> 编程资料编程资料

微信小程序引入外部icon(阿里巴巴矢量图标)的全过程_javascript技巧_

2023-05-24 286人已围观

简介 微信小程序引入外部icon(阿里巴巴矢量图标)的全过程_javascript技巧_

1.实现效果

2.实现步骤

阿里巴巴矢量图标库

搜索想要的图标，添加购物车。

添加进自己的项目中

获取代码（注意：当项目更新之后，该代码也需更新）

3.实现代码

新建一个iconFont.wxss,复制上面所得的代码。

/* 当添加新的图标之后，@font-face需要进行更新 */ @font-face { font-family: 'iconfont'; /* Project id 2361238 */ src: url('//at.alicdn.com/t/font_2361238_cxshqh1m3m7.woff2?t=1642320886173') format('woff2'), url('//at.alicdn.com/t/font_2361238_cxshqh1m3m7.woff?t=1642320886173') format('woff'), url('//at.alicdn.com/t/font_2361238_cxshqh1m3m7.ttf?t=1642320886173') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* .icon_01 { font-size: 40px; } */ .icon_01::before { content: "\e6f1"; } .icon_02::before { content: "\e7bd"; } .icon_03::before { content: "\e61a"; }

引入一个图标，取到他的后四位。

设置图标的大小与颜色

 color: #fff; font-size: 40px;

注意点：新增一个图标之后，要更新相应的font-face

使用图标：

在wxss页面引入外部样式：

@import "./iconFont.wxss"; page { background-color: #fff; } .box { margin: 30rpx auto; width: 700rpx; } .mb20 { margin-bottom: 20rpx; width: 150rpx; height: 150rpx; background-color: #551e1e; border-radius: 50%; line-height: 150rpx; text-align: center; color: #fff; font-size: 40px; } .a1 { background-color: rgb(61, 148, 224); color: #333; } .a2 { background-color: rgb(123, 231, 177); color: #333; font-size: 20px; }

总结

到此这篇关于微信小程序引入外部icon(阿里巴巴矢量图标)的文章就介绍到这了,更多相关微信小程序引入外部icon内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：Vue 中指令v-bind动态绑定及与v-for结合使用详解_vue.js_

下一篇：开启Vue项目缺少node_models包的问题及解决_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网