微信小程序 如何引入外部字体库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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
jquery 手势密码插件
Mar 17 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 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脚本加密专家php解密算法
2020/09/13 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
用jquery来定位
2007/02/20 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
php跨域调用json的例子
2013/11/13 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
JavaScript中的函数嵌套使用
2015/06/04 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python正则表达式常用函数总结
2017/06/24 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Python中字符串List按照长度排序
2019/07/01 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
django删除表重建的实现方法
2019/08/28 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
光电信息专业应届生求职信
2013/10/07 职场文书
应届生自荐信范文
2014/02/21 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
机房搬迁方案
2014/05/01 职场文书
入党群众意见范文
2015/06/02 职场文书
摩登时代观后感
2015/06/03 职场文书
python基础之函数的定义和调用
2021/10/24 Python