微信小程序 如何引入外部字体库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 相关文章推荐
预加载css或javascript的js代码
Apr 23 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
js严格模式总结(分享)
Aug 22 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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处理Oracle的CLOB实例
2014/11/03 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
Python 描述符(Descriptor)入门
2016/11/20 Python
python 生成器协程运算实例
2017/09/04 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
Python内置模块turtle绘图详解
2017/12/09 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
利用python如何处理nc数据详解
2018/05/23 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
详解python数据结构和算法
2019/04/18 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
C语言面试题
2015/10/30 面试题
什么是网络协议
2016/04/07 面试题
村党支部书记个人对照材料汇报
2014/10/26 职场文书
教师个人事迹材料
2014/12/17 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
居安思危观后感
2015/06/11 职场文书
mysq启动失败问题及场景分析
2021/07/15 MySQL