介绍 @font-face {
,字体类型:& # 39;iconfont& # 39;,,/*, project id 518032 */,src: url (& # 39;//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot& # 39;);
,src: url (& # 39;//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot? # iefix& # 39;),格式(& # 39;embedded-opentype& # 39;),
,url (& # 39;//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.woff& # 39;),格式(& # 39;woff # 39;),
,url (& # 39;//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.ttf& # 39;),格式(& # 39;truetype # 39;),
,url (& # 39;//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.svg # iconfont& # 39;),格式(& # 39;svg # 39;);
}
.iconfont {
,字体类型:“iconfont" !重要;
,字体大小:60 rpx;
,字体样式:正常;
,-webkit-font-smoothing:平滑;
,-moz-osx-font-smoothing:灰度;
}/*本项目使用的18个图标,*/.icon-zhiding:{之前内容:& # 39;\ e739& # 39;;}
.icon-zuojiantou:{之前内容:& # 39;\ e736& # 39;;}
.icon-youjiantou:{之前内容:& # 39;\ e735& # 39;;}
.icon-shangjiantou:{之前内容:& # 39;\ e734& # 39;;}
.icon-xiajiantou1:{之前内容:& # 39;\ e733& # 39;;}
.icon-xiajiantou:{之前内容:& # 39;\ e6cc& # 39;;}
.icon-gengduotianchong:{之前内容:& # 39;\ e67f& # 39;;}
.icon-erweima:{之前内容:& # 39;\ e65f& # 39;;}
.icon-fenleiorguangchangorqita:{之前内容:& # 39;\ e64f& # 39;;}
.icon-dibiao:{之前内容:& # 39;\ e64d& # 39;;}
.icon-bangzhu:{之前内容:& # 39;\ e64a& # 39;;}
.icon-xinfeng:{之前内容:& # 39;\ e640& # 39;;}
.icon-duihuaxinxi:{之前内容:& # 39;\ e639& # 39;;}
.icon-sousuo:{之前内容:& # 39;\ e62f& # 39;;}
.icon-shouye:{之前内容:& # 39;\ e62d& # 39;;}
.icon-shezhi:{之前内容:& # 39;\ e62a& # 39;;}
.icon-shanchu:{之前内容:& # 39;\ e629& # 39;;}
.icon-dianhua:{之前内容:& # 39;\ e61b& # 39;;} & lt; view>
,& lt; icon 类=癷confont icon-zhiding"祝辞& lt;/icon>
,& lt; icon 类=癷confont icon-zuojiantou"祝辞& lt;/icon>
,& lt; icon 类=癷confont icon-youjiantou"祝辞& lt;/icon>
,& lt; icon 类=癷confont icon-shangjiantou"祝辞& lt;/icon>
,& lt; icon 类=癷confont icon-xiajiantou1"祝辞& lt;/icon>
,& lt; icon 类=癷confont icon-xiajiantou"祝辞& lt;/icon>
& lt;/view>
& lt; view>
,& lt; icon 类=癷confont icon-gengduotianchong"祝辞& lt;/icon>
,& lt; icon 类=癷confont icon-erweima"祝辞& lt;/icon>
,& lt; icon 类=癷confont icon-fenleiorguangchangorqita"祝辞& lt;/icon>
,& lt; icon 类=癷confont icon-dibiao"祝辞& lt;/icon>
,& lt; icon 类=癷confont icon-bangzhu"祝辞& lt;/icon>
,& lt; icon 类=癷confont icon-xinfeng"祝辞& lt;/icon>
& lt;/view>
& lt; view>
,& lt; icon 类=癷confont icon-duihuaxinxi"祝辞& lt;/icon>
,& lt; icon 类=癷confont icon-sousuo"祝辞& lt;/icon>
,& lt; icon 类=癷confont icon-shouye"祝辞& lt;/icon>
,& lt; icon 类=癷confont icon-shezhi"祝辞& lt;/icon>
,& lt; icon 类=癷confont icon-shanchu"祝辞& lt;/icon>
,& lt; icon 类=癷confont icon-dianhua"祝辞& lt;/icon>
& lt;/view> @import “src/css/icon.wxss";
.iconfont {
,字体类型:“iconfont";
,字体大小:60 rpx;
}/*本项目使用的18个图标,*/.icon-zhiding:{之前内容:& # 39;\ e739& # 39;;}
.icon-zuojiantou:{之前内容:& # 39;\ e736& # 39;;}
.icon-youjiantou:{之前内容:& # 39;\ e735& # 39;;}
.icon-shangjiantou:{之前内容:& # 39;\ e734& # 39;;}
.icon-xiajiantou1:{之前内容:& # 39;\ e733& # 39;;}
.icon-xiajiantou:{之前内容:& # 39;\ e6cc& # 39;;}
.icon-gengduotianchong:{之前内容:& # 39;\ e67f& # 39;;}
.icon-erweima:{之前内容:& # 39;\ e65f& # 39;;}
.icon-fenleiorguangchangorqita:{之前内容:& # 39;\ e64f& # 39;;}
.icon-dibiao:{之前内容:& # 39;\ e64d& # 39;;}
.icon-bangzhu:{之前内容:& # 39;\ e64a& # 39;;}
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍了微信小程序怎么引入外部字体库iconfont的图标,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
如何引入外部字体库iconfont的图标,具体如下
选择iconfont图标
<强>全局引入应用程序。wxs
使用图标
效果图
注意:此处实现采用的是无APPID的开发模式,实际应用应该在微信小程序管理平台的开发设置中配置合法域名。
<强>下载到本地
<强>步骤
字体文件转化成base64格式
解压压缩包——找到ttf格式文件——上传到平台转化为base64格式——下载压缩包——将css文件名改为wxs,放入项目文件夹,用@ import全局引入,使用
使用,引入及全局定义
