在学习了上一篇导入阿里巴巴矢量图库的图标方法后https://www.cnblogs.com/en1302coling/p/11439590.html
这里还有一种导入方法
首先,把想要的图标添加入项目,点击Unicode显示代码,并点击复制代码
将复制的代码黏贴到app.wxss,并修改iconfont的样式,并将每个icon的名字赋予相应的代码编号,如下图所示:
例子:
在微信开发工具,*.wxml中写入想要的代码
<view class="item3"> <view class="itemClass"> <icon class="iconfont icon-localmusic"></icon> <text class="text">本地音乐</text> <view class="divline1"></view> </view> <view class="itemClass"> <icon class="iconfont icon-zuijinbofang"></icon> <text class="text">最近播放</text> <view class="divline1"></view> </view> <view class="itemClass"> <icon class="iconfont icon-download"></icon> <text class="text">下载管理</text> <view class="divline1"></view> </view> <view class="itemClass"> <icon class="iconfont icon-radio"></icon> <text class="text">我的电台</text> <view class="divline1"></view> </view> <view class="itemClass"> <icon class="iconfont icon-collect"></icon> <text class="text">我的收藏</text> <view class="divline1"></view> </view> </view>
在*.wxss中设置样式
.item3{ background: #ffffff; } .itemClass{ height: 80rpx; } .text{ font-size: 15px; margin-left: 50rpx; } .divline1{ background: rgba(238, 236, 236, 0.781); width: 90%; height: 0.1rpx; margin-left: 100rpx; margin-top: 20rpx; }
打开app.wxss,将复制的相关代码黏贴并赋值
@font-face { font-family: \'iconfont\'; /* project id 1359989 */ src: url(\'//at.alicdn.com/t/font_1359989_5h4uou7la6m.eot\'); src: url(\'//at.alicdn.com/t/font_1359989_5h4uou7la6m.eot?#iefix\') format(\'embedded-opentype\'), url(\'//at.alicdn.com/t/font_1359989_5h4uou7la6m.woff2\') format(\'woff2\'), url(\'//at.alicdn.com/t/font_1359989_5h4uou7la6m.woff\') format(\'woff\'), url(\'//at.alicdn.com/t/font_1359989_5h4uou7la6m.ttf\') format(\'truetype\'), url(\'//at.alicdn.com/t/font_1359989_5h4uou7la6m.svg#iconfont\') format(\'svg\'); } .iconfont { font-family: "iconfont" !important; margin-left: 20rpx; font-size: 20px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-localmusic:before{content: \'\e6b4\';} .icon-zuijinbofang:before{content: \'\e605\';} .icon-download:before{content: \'\e67d\';} .icon-radio:before{content: \'\e608\';} .icon-collect:before{content: \'\e61e\';} .icon-heart:before{content: \'\e632\';}
保存即可导入想要的图标