微信小程序----引入外部字体库iconfont的图标_content: "\e65f";-程序员宅基地

技术标签: 微信小程序  微信  

WXRUI体验二维码

WXRUI体验码

如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

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

选择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的开发模式,实际应用应该在微信小程序管理平台的开发设置中配置合法域名。

下载到本地

步骤

字体文件转化成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>

效果图

这里写图片描述

WXRUI体验二维码

WXRUI体验码

如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

其他

我的博客,欢迎交流!

我的程序员宅基地,欢迎交流!

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_38082783/article/details/78873053

智能推荐

matlab学习笔记-程序员宅基地

文章浏览阅读165次。加入水印,采用lsb%Name: Chris Shoemaker%Course: EER-280 - Digital Watermarking%Project: Least Significant Bit Substitution% Watermark Embedingclear all;% save start timestart_time=cputime;% read in the co..._[cover_object,map]=imread(file_name);

ipv6无网络访问权限可行解决方案_ipv6无internet访问权限怎么办-程序员宅基地

文章浏览阅读1.6w次。原文地址:http://www.xitongtiandi.net/wenzhang/win10/12654.htmlWin10专业版下ipv6无网络访问权限解决方案(只在win10专业版下做了测试,win7和win8.1待测试)1、首先打开 https://support.microsoft.com/en-us/kb/929852 选择Re-enable IPv6 相关的_ipv6无internet访问权限怎么办

【C程序设计】——程序=算法+数据结构_程序等于数据结构+算法-程序员宅基地

文章浏览阅读3.1k次,点赞32次,收藏37次。而且每次都要直接使用上一步骤的具体运算结果(如2,6,24等),也不方便,应当能找到一种通用的表示方法。由于数值运算往往有现成的模型,可以运用数值分析方法,因此对数值运算的算法的研究比较深入,算法比较成熟。从图中可以看出:“其他”这一部分,包括不能被4整除的年份,以及能被4整除,又能被100整除,但不能被400整除的那些年份(如1900年),它们都是非闰年。:若year能被4整除,不能被100整除,则输出year的值和“是闰年”。因此,上述算法不仅是正确的,而且是计算机能方便实现的较好的算法。_程序等于数据结构+算法

Keil : Error-Flash Download failed Cortex-M4错误解决方案整理(J-Flash擦除下载教程)_error: flash download failed - "cortex-m4-程序员宅基地

文章浏览阅读2.6w次,点赞18次,收藏88次。记录一下碰到的问题解决方法第一步:首先最先要确定的是芯片和设置是否对应!!!!!!!!!第二步:确定芯片和设置对应无误后,再考虑下面的方法Keil : Error-Flash Download failed Cortex-M4错误解决方案整理在开发 nRF51822/nRF52832/nRF52840时候出现如下如下问题:问题: Keil电子下载时候出现 Error: Flash Download failed - "Cortex-M4"的错误,如下图根据官方教程解释如下,还是发现不容易解决,另_error: flash download failed - "cortex-m4

SQL字符串分割成若干列-程序员宅基地

文章浏览阅读313次。在数据库编程中,很多朋友会碰到分割字符串的需求,一般都是分割成一列多行模式,但也有时会需要分割成多列一行的模式,下面我们来看下如何实现这种需求。首先创建一个辅助函数,来得到生成多列的SQL语句:create function toArray(@str nvarchar(1000),@sym nvarchar(10))returns nvarchar(3000)asbe..._sqlserver 字符串分割成多列 小提琴

配置MM32微控制器引脚复用功能_mm32f单片机的bootloader串行口引脚-程序员宅基地

文章浏览阅读1.3k次。配置MM32微控制器引脚复用功能文章目录配置MM32微控制器引脚复用功能IntroductionAlgorithmGPIOx_CR寄存器GPIOx_AFR寄存器GPIOx_CR & GPIOx_AFR寄存器TIMUARTSPI_MASTERSPI_SLAVEI2CCANADCFSMCQSPIDACCOMPSDIOUSBPraticeConclusionIntroduction使用过NXP(FSL)微控制器的开发者在配置引脚复用功能时,直接在PORT模块中,对应引脚的的PCR寄存器的MUX字段_mm32f单片机的bootloader串行口引脚

随便推点

存储过程学习总结-程序员宅基地

文章浏览阅读134次。[color=darkred][size=x-large]存储过程学习总结[/size][/color][size=medium]1、存储过程基本语法:[/size]create procedure sp_name()begin ......end;[size=medium]2、如何调用:[/size]call sp_name();[size=medium]..._存储过程repeatuse near 'end repeat; close curgra;

动态script加载数据-程序员宅基地

文章浏览阅读97次。Neil Fraser文章看得糊里糊涂,e文不是很好...一般我们加载数据会生成一个script标签,在onload事件里remove掉,或者在jsonp回调函数中remove掉script标签,取得数据这样其实script占用的内存并没有释放,必须:for (var prop in jsFile) { delete jsFile[prop];}ie下不能d..._script加载的数据在哪里

Javascript存放位置约束-程序员宅基地

文章浏览阅读77次。JavaScript 程序应该尽量放在 .js 的文件中,需要调用的时候在 HTML 中以 &lt;script src="filename.js"&gt; 的形式包含进来。JavaScript 代码若不是该 HTML 文件所专用的,则应尽量避免在 HTML 文件中直接编写 JavaScript 代码。因为这样会大大增加 HTML 文件的大小,无益于代码的压缩和缓存的使用。&lt;scr..._js里的下载路径怎么做约束

程序员真正的价值_程序员价值-程序员宅基地

文章浏览阅读604次。作者:池建强网址:macshuo.com微信:sagacity-mac问:池老师,我是个不爱互动的人,但是您所有的文章我都看了,非常感谢您的引导,我入手了人生第一台 MBP。现在问题来了,但是找不到更合适的人解答,只能求助于您了,如果您有时间的话。问题是这样的:我有个32bit unix file(开启一个服务进程),在 Mac 上执行时错误提示是:exec f_程序员价值

测试工作总体流程图-程序员宅基地

文章浏览阅读143次。测试工作总体流程图_测试的工作流程