微信小程序 如何引入外部字体库iconfont的图标


Posted in Javascript onJanuary 31, 2018

如何引入外部字体库iconfont的图标,具体如下

直接使用阿里巴巴的网络路径

选择iconfont图标

官网:阿里巴巴矢量字体库
步骤:阿里巴巴字体库使用方法

微信小程序 如何引入外部字体库iconfont的图标

全局引入app.wxss

@font-face {
 font-family: 'iconfont'; /* project id 518032 */
 src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot');
 src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot?#iefix') format('embedded-opentype'),
 url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.woff') format('woff'),
 url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.ttf') format('truetype'),
 url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.svg#iconfont') format('svg');
}
.iconfont {
 font-family:"iconfont" !important;
 font-size:60rpx;
 font-style:normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
/*本项目使用的18个图标 */
.icon-zhiding:before{content: '\e739';}
.icon-zuojiantou:before{content: '\e736';}
.icon-youjiantou:before{content: '\e735';}
.icon-shangjiantou:before{content: '\e734';}
.icon-xiajiantou1:before{content: '\e733';}
.icon-xiajiantou:before{content: '\e6cc';}
.icon-gengduotianchong:before{content: '\e67f';}
.icon-erweima:before{content: '\e65f';}
.icon-fenleiorguangchangorqita:before{content: '\e64f';}
.icon-dibiao:before{content: '\e64d';}
.icon-bangzhu:before{content: '\e64a';}
.icon-xinfeng:before{content: '\e640';}
.icon-duihuaxinxi:before{content: '\e639';}
.icon-sousuo:before{content: '\e62f';}
.icon-shouye:before{content: '\e62d';}
.icon-shezhi:before{content: '\e62a';}
.icon-shanchu:before{content: '\e629';}
.icon-dianhua:before{content: '\e61b';}

使用图标

<view>
 <icon class="iconfont icon-zhiding"></icon>
 <icon class="iconfont icon-zuojiantou"></icon>
 <icon class="iconfont icon-youjiantou"></icon>
 <icon class="iconfont icon-shangjiantou"></icon>
 <icon class="iconfont icon-xiajiantou1"></icon>
 <icon class="iconfont icon-xiajiantou"></icon>
</view>
<view>
 <icon class="iconfont icon-gengduotianchong"></icon>
 <icon class="iconfont icon-erweima"></icon>
 <icon class="iconfont icon-fenleiorguangchangorqita"></icon>
 <icon class="iconfont icon-dibiao"></icon>
 <icon class="iconfont icon-bangzhu"></icon>
 <icon class="iconfont icon-xinfeng"></icon>
</view>
<view>
 <icon class="iconfont icon-duihuaxinxi"></icon>
 <icon class="iconfont icon-sousuo"></icon>
 <icon class="iconfont icon-shouye"></icon>
 <icon class="iconfont icon-shezhi"></icon>
 <icon class="iconfont icon-shanchu"></icon>
 <icon class="iconfont icon-dianhua"></icon>
</view>

效果图

微信小程序 如何引入外部字体库iconfont的图标

注意:此处实现采用的是无APPID的开发模式,实际应用应该在微信小程序管理平台的开发设置中配置合法域名。

下载到本地

步骤

字体文件转化成base64格式

解压压缩包 —- 找到ttf格式文件 —- 上传到平台转化为base64格式 —- 下载压缩包 —- 将css文件名改为wxss —- 放入项目文件夹 —- 用@import全局引入 —- 使用

使用—-引入及全局定义

@import "src/css/icon.wxss";
.iconfont {
 font-family: "iconfont";
 font-size:60rpx;
}
/*本项目使用的18个图标 */
.icon-zhiding:before{content: '\e739';}
.icon-zuojiantou:before{content: '\e736';}
.icon-youjiantou:before{content: '\e735';}
.icon-shangjiantou:before{content: '\e734';}
.icon-xiajiantou1:before{content: '\e733';}
.icon-xiajiantou:before{content: '\e6cc';}
.icon-gengduotianchong:before{content: '\e67f';}
.icon-erweima:before{content: '\e65f';}
.icon-fenleiorguangchangorqita:before{content: '\e64f';}
.icon-dibiao:before{content: '\e64d';}
.icon-bangzhu:before{content: '\e64a';}
.icon-xinfeng:before{content: '\e640';}
.icon-duihuaxinxi:before{content: '\e639';}
.icon-sousuo:before{content: '\e62f';}
.icon-shouye:before{content: '\e62d';}
.icon-shezhi:before{content: '\e62a';}
.icon-shanchu:before{content: '\e629';}
.icon-dianhua:before{content: '\e61b';}

开发使用

<view>
 <icon class="iconfont icon-zhiding"></icon>
 <icon class="iconfont icon-zuojiantou"></icon>
 <icon class="iconfont icon-youjiantou"></icon>
 <icon class="iconfont icon-shangjiantou"></icon>
 <icon class="iconfont icon-xiajiantou1"></icon>
 <icon class="iconfont icon-xiajiantou"></icon>
</view>
<view>
 <icon class="iconfont icon-gengduotianchong"></icon>
 <icon class="iconfont icon-erweima"></icon>
 <icon class="iconfont icon-fenleiorguangchangorqita"></icon>
 <icon class="iconfont icon-dibiao"></icon>
 <icon class="iconfont icon-bangzhu"></icon>
 <icon class="iconfont icon-xinfeng"></icon>
</view>
<view>
 <icon class="iconfont icon-duihuaxinxi"></icon>
 <icon class="iconfont icon-sousuo"></icon>
 <icon class="iconfont icon-shouye"></icon>
 <icon class="iconfont icon-shezhi"></icon>
 <icon class="iconfont icon-shanchu"></icon>
 <icon class="iconfont icon-dianhua"></icon>
</view>

效果图

微信小程序 如何引入外部字体库iconfont的图标

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 表单规则集合对象
Jul 21 Javascript
javascript 面向对象编程基础 多态
Aug 21 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 #Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 #Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 #Javascript
微信小程序页面生命周期详解
Jan 31 #Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 #Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 #Javascript
微信小程序App生命周期详解
Jan 31 #Javascript
You might like
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
php while循环控制的简单实例
2016/05/30 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
HTML node相关的一些资料整理
2010/01/01 Javascript
div层的移动及性能优化
2010/11/16 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
Python模块学习 re 正则表达式
2011/05/19 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
django框架创建应用操作示例
2019/09/26 Python
如何在python中写hive脚本
2019/11/08 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
详解KMP算法以及python如何实现
2020/09/18 Python
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
英智兴达软件测试笔试题
2016/10/12 面试题
垃圾回收的优点和原理
2014/05/16 面试题
教育专业自荐书范文
2013/12/17 职场文书
英语演讲稿范文
2014/01/03 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
会计人员岗位职责
2015/02/03 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js