微信小程序如何引入外部字体库iconfont的_软件运维

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

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

选择iconfont图标

官网：阿里巴巴矢量字体库

步骤：阿里巴巴字体库使用方法

全局引入app.wxss

12345678910111213141516171819202122232425262728293031323334@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'}

使用图标

123456789101112131415161718192021222324<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全局引入 —- 使用

使用—-引入及全局定义

123456789101112131415161718192021222324@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'}

开发使用

效果图

程序员大本营

技术文章内容聚合第一站

首页 / 联系我们 / 版权申明 / 隐私条款

搜索

Delphi 10.3.3无法生成安卓Android APK错误：Troubleshooting: Cannot Deploy an Application for Android

技术标签： Delphi android 无法生成Android APK Cannot Deploy

错误提示：Troubleshooting: Cannot Deploy an Application for Android 解决方法：首先检查是否缺少安装Android SDK 颈椎枕疑难解答 没有列出Android目标无法在设备或模拟器上运行无法部署疑难解答。无法部署Android应用程序要解决这个问题，请查看这些方面。检查 "...

查看原文

VDO.AI

PlayUnmute

Loaded: 0.68%

Fullscreen

charles 排除 pc_如何使Windows为您排除PC问题

with hardware detection and drivers. 硬件和设备：检查您的计算机是否存在硬件设备问题。如果硬件设备(尤其是最近安装的硬件设备)无法正常工作，则此疑难解答程序可以... something. 就是这样没有针对您遇到的每个问题的疑难解答程序，并且确实存在的疑难解答程序无法解决所有问题。但是，当您遇到某些问题时，疑难解答是一个不错的起点。 › How to

The emulator process for AVD Copy_of_Pixel_3_XL_API_30 was killed.

以前在使用android studio时就遇到过类似的问题，但是好久没用了，今天又遇到了类似的问题：我的是AVD一直被KILLED，即使把AVD复制到SDK的文件夹下还是被KILLED。所以肯定是系统设置出了问题。 1：打开更新与安全 2：点击立即重新启动 3：疑难解答 4：选择高级选项 5：启动设置 6：按8禁止。。。。。。。 7：重启于是就好了，我是小白，希望对你有所帮助

JZ2440V3开发板:05---禁止驱动程序强制签名

整个流程：设置-->更新和安全-->选“恢复”-->立即重启-->疑难解答-->高级选项-->启动设置-->点击“重启”，此时电脑就会重启来到设置界面，在设置界面选择：疑难解答->高级选项->启动设置->重启。再次重启之后按下F7选择“禁止驱动程序强制签名”

VS 无法在web服务器上启动调试。您没有调试web服务器进程的权限

win10系统: 方法一： ①：右键点击属性 ②：点击高级,把勾去掉。方法二： ①：找到vs的安装目录,点击devenv.exe右键,选择"兼容性疑难解答"。 ②：选择"疑难解答程序" ③：选择“该程序需要附加权限” ④：要先点击测试程序，然后才能点击下一步。 ⑤：启动VS，大功告成

AutoCAD安装后无法打开快捷键

AutoCAD安装后无法打开快捷键的问题解决方案：点击右键属性——打开文件所在位置——找到acad所在的位置点击右键——打开兼容性疑难解答——疑难解答程序——修复以后就出现了激活界面——安照步骤去激活——激活以后就可以打开了

智能推荐

Winsoft JDBC for Android v3.7 for Delphi &C++SEO狼术

Winsoft JDBC for Android v3.7 for Delphi &C++ Builder XE5 - 10.3 Rio Full Source 适用于Delphi和C ++ Builder XE5的Android v3.7的Winsoft JDBC-10.3 Rio完整源代码适用于Android的Ja...

Android Apk通过代理Application解密，还原正式的Application，AES加密Apk

apk通过代理application解密，还原 1.manifest里添加 2.1解密加密后的Apk里面的.dex文件，还原正式的Application 2，Apk加密，对齐，签名最终得到的app-signed-aligned.apk就是加密后的...

解决AS导入Error:(1, 0) Could not find method apply() for arguments [{plugin=com.android.application}]错误

AS导入项目后，难免会出现错误，这篇帖子针对以下错误做出解决方案。 Error:(1, 0) Could not find method apply() for arguments [{plugin=com.android.application}] on project ':app' of type org.gradle.api.Project. ①：打开项目文件下的App文件夹，复制buil...

解决AS导入Error:(1, 0) Could not find method apply() for arguments [{plugin=com.android.application}]错误

关于Eclipse for Android安装SDK过程中出现的错误——The import android.support cannot be resolved

The import android.support cannot be resolved 错误提示如下： 1、点击project下的 Properties 2、导航到 Java Build Path 3、然后转到Libraries选项卡。点击Add External JARs右侧窗格上的按钮。 4、选择android-support-v4.jar文件，通常Jar文件的路径为： YOUR_DRIV...

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

发表评论

评论列表（0条）

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

发表评论

评论列表（0条）

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