微信小程序 如何引入外部字体库iconfont的图标
时间:2019-04-13
本文章向大家介绍微信小程序 如何引入外部字体库iconfont的图标,主要包括微信小程序 如何引入外部字体库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>
效果图
注意:此处实现采用的是无APPID的开发模式,实际应用应该在微信小程序管理平台的开发设置中配置合法域名。
下载到本地
步骤
解压压缩包 —- 找到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>
效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 开源软件十位贡献者,PHP之父只能排第十,第一名当之无愧!
- DataTable排序结果的纠正
- web框架
- java:利用xpath删除xml中的空节点
- java array to list
- Python之Dijango的“坑” hostname, aliases, ipaddrs = gethostbyaddr(name) UnicodeDecodeError: 'utf-8' cod
- nGrinder 简易使用教程
- UI设计高效学习网站&工具,来自学长的收藏夹哦
- 安装git出现templates not found的问题
- 时间戳 时间
- jenkins 设置 gitlab web hooks
- 测试流程?项目管理流程?
- 学web前端开发写给新手的建议,超实用!
- 价值22万的5字母域名sanwa.com被启用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法