当前位置: 首页 > news >正文

如何从iconfont中获取字体图标并应用到微信小程序中去?

下面我们一一个微信小程序的登录界面的制作为例来说明,如何从iconfont中获取字体图标是如何应用到微信小程序中去的。首先我们看效果。
在这里插入图片描述
这里所有的图标,都是从iconfont中以字体的形式来加载的,也就是说,我们自始至终没有使用一张图片。
如果这就是你要追求的效果,那么我们下面开始一步一步带你如何实现。

文章目录

  • 一、获取资源
    • 1、选择图标
    • 2、下载
    • 3、解压
  • 二、如何应用到微信小程序中去?
    • 1、修改iconfont.wxss
    • 2、在wxml文件中使用

文章原出处: https://haigear.blog.csdn.net/article/details/143225095

一、获取资源

打开网站:https://www.iconfont.cn/,如果你没有注册账号,最好是使用微信注册一个账号,这样后面你正在编写的微信小程序项目就会自动识别在这个网站平台上。
在这里插入图片描述

1、选择图标

首先,在iconfont中选择好你需要的图标,添加进入你的购物车,然后加入你的项目
在这里插入图片描述

2、下载

下载字体包文件,我们主要是获取其中的iconfont.css文件,在微信小程序中我们要用到它来显示字体图标。
在这里插入图片描述

3、解压

解压之前在微信项目中新建一个font的文件夹,将这些文件解压到font文件夹中。如下图:
在这里插入图片描述
千万记住,解压出来的css文件,将扩展名修改为wxss,这样微信小程序才能够正确识别。如果不想把这些字体也打包到微信小程序中,那么只要解压iconfont.css一个文件即可。

文章原出处:https://haigear.blog.csdn.net/article/details/143225095

二、如何应用到微信小程序中去?

上面,我们已经将最重要的文件放进了微信小程序项目的font文件夹中去了。

1、修改iconfont.wxss

如果你不想打包字体到微信小程序中,则我们就需要修改代码,将iconfont中的@font-face {……}部分,替换为你在下图复制的代码
在这里插入图片描述
但是,如果你担心提供字体的平台服务部稳定,那么你还是老老实实将下载的字体也一并解压到你的微信小程序的font目录下。
需要注意的是,这些本地字体如果我们在先下载前没有设置为base64微信小程序目前还不能直接识别他们,需要进行转码,将转码好的文件再次放入font下才可以使用。
设置如下图:(在项目设置里面)
在这里插入图片描述
如果你都已经下载完成了,也可以找一个转码转码的网站来进行转化,这里提供一个转码的网站:https://transfonter.org/
在这里插入图片描述

按照我上面标识的步骤来操作,3步就可以得到你要的字体。下载下来的压缩包中,对于我们来说有用的酒是这个stylesheet.css.
在这里插入图片描述
我们同样是将你微信小程序项目中的iconfont.wxss中的@font-face {……}部分,替换为stylesheet.css文件中的@font-face {……}部分,这样本字体图标地解析就能够正确完成。

2、在wxml文件中使用

这个比较简单,随便整一个标签试试:

<view class="iconfont icon-weixin"/><view class="iconfont icon-qq"/><view class="iconfont icon-weibo"/>

运行的效果如下:
在这里插入图片描述
好了,就说到这里,有什么疑问留言讨论。文章随时可能更新,请关注文章原出处:https://haigear.blog.csdn.net/article/details/143225095

相关文章:

如何从iconfont中获取字体图标并应用到微信小程序中去?

下面我们一一个微信小程序的登录界面的制作为例来说明&#xff0c;如何从iconfont中获取字体图标是如何应用到微信小程序中去的。首先我们看效果。 这里所有的图标&#xff0c;都是从iconfont中以字体的形式来加载的&#xff0c;也就是说&#xff0c;我们自始至终没有使用一张…...

C语言中的位操作

第一章 变量某位赋值与连续赋值 寄存器 | 值 //例如&#xff1a;a 1000 0011b a | (1<<2) //a 1000 0111 b 单独赋值 a | (3<<2*2) // 1011 0011b 连续赋值 第二章 变量某位清零与连续清零 寄存器 & ~&#xff08;&#xff09; 值 //例子&#xff1a;a …...

Spring之HTTP客户端--RestTemplate的使用

原文网址&#xff1a;Spring之HTTP客户端--RestTemplate的使用_IT利刃出鞘的博客-CSDN博客 简介 本文介绍RestTemplate的用法。RestTemplate是Spring自带的HTTP客户端&#xff0c;推荐使用。 项目中经常需要使用http调用第三方的服务&#xff0c;常用的客户端如下&#xff1…...

vscode和pycharm在当前工作目录的不同|python获取当前文件目录和当前工作目录

问题背景 相信大家都遇到过一个问题&#xff1a;一个项目在vscode&#xff08;或pycharm&#xff09;明明可以正常运行&#xff0c;但当在pycharm&#xff08;或vscode&#xff09;中时&#xff0c;却经常会出现路径错误。起初&#xff0c;对于这个问题&#xff0c;我也是一知…...

速盾:海外高防CDN有哪些优势?

海外高防CDN&#xff08;Content Delivery Network&#xff09;是一种通过部署分布式节点服务器来加速网站内容分发的技术&#xff0c;它能够提供更快速、稳定、安全的网站访问体验。相比于传统的CDN服务&#xff0c;海外高防CDN具有以下几个优势&#xff1a; 全球分布&#xf…...

OpenCV视觉分析之目标跟踪(4)目标跟踪类TrackerDaSiamRPN的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::TrackerDaSiamRPN 是 OpenCV 中用于目标跟踪的一个类&#xff0c;它实现了 DaSiam RPN&#xff08;Deformable Siamese Region Proposal Net…...

自动对焦爬山算法原理

自动对焦爬山算法原理可以归纳为以下几个关键步骤&#xff1a; &#xff08;1&#xff09;初始化&#xff1a; 爬山算法从一个随机或预设的初始位置开始&#xff0c;这个位置代表了镜头的初始焦距。 &#xff08;2&#xff09;清晰度评价&#xff1a; 算法首先在当前焦距下捕…...

Hyperledger Fabric有那些核心技术,和其他区块链对比Hyperledger Fabric有那些优势

Hyperledger Fabric是一个模块化、权限化的企业级区块链平台&#xff0c;与比特币、以太坊等公有链相比&#xff0c;Fabric主要为私有链或联盟链设计&#xff0c;适用于企业应用。它包含多项核心技术&#xff0c;使其在企业级区块链应用中具有独特优势。以下是Fabric的核心技术…...

「Mac畅玩鸿蒙与硬件8」鸿蒙开发环境配置篇8 - 应用依赖与资源管理

本篇将介绍如何在 HarmonyOS 项目中高效管理资源文件和依赖&#xff0c;以确保代码结构清晰并提升应用性能。资源管理涉及图片、字符串、多语言文件等&#xff0c;通过优化文件加载和依赖管理&#xff0c;可以显著提升项目的加载速度和运行效率。 关键词 资源管理应用依赖优化…...

【Gorm】传统sql的增删查改,通过go去操作sql

MySQL中的建库&#xff0c;建表&#xff0c;删库&#xff0c;删表&#xff0c;添加记录&#xff0c;查询&#xff0c;删除记录&#xff0c;更新记录这些命令是一定要回的&#xff0c;就算我们脱离 orm 这些&#xff0c;也能直接连接上数据库进行操作。 一、数据库的操作 # 查…...

HTML小阶段二维表和思维导图

下面是对标签、元素、属性的对比二维表&#xff0c;通过对比3w1h&#xff08;what是什么、where用在哪、why为什么要用、how如何用&#xff09;来学习区分学习标签、元素、属性 标签 元素 属性 what &#xff08;Tags&#xff09;标签是用来标记内容块或标明元素内容意义 …...

AI与低代码的碰撞:企业数字化转型的新引擎

引言 在当今的商业环境中&#xff0c;企业数字化转型已从选择题变成了必答题。面对日益复杂的市场竞争和不断变化的客户需求&#xff0c;传统的开发模式常常显得力不从心——开发周期冗长、技术门槛高、成本居高不下&#xff0c;企业很难快速响应市场变化。而在这种背景下&…...

HarmonyOS应用开发者基础认证——初级闯关习题参考答案大全

相关文章 HarmonyOS应用开发者中级认证——中级闯关习题参考答案大全 HarmonyOS应用开发者高级认证——高级闯关习题参考答案大全 文章目录 HarmonyOS第一课 HarmonyOS介绍判断题单选题多选题 HarmonyOS第一课 DevEco Studio的使用判断题单选题多选题 HarmonyOS第一课 ArkTS语法…...

Vue背景图片自适应大屏与小屏

1&#xff0c;父绝子相 效果是台式看的更多&#xff0c;笔记本看部分。但是图片不会变形 <div class"father" style"width:100%; position:relative"> <img src"test.png" class"son" style"width:1920px; position:a…...

MongoDB 8.0.3版本安装教程

MongoDB 8.0.3版本安装教程 一、下载安装 1.进入官网 2.选择社区版 3.点击下载 4.下载完成后点击安装 5.同意协议&#xff0c;下一步 6.选择第二个Custon&#xff0c;自定义安装 7.选择安装路径 &#xff01;记住安装路径 8.默认&#xff0c;下一步 9.取…...

【C语言】预处理(预编译)详解(下)(C语言最终篇)

文章目录 一、#和##1.#运算符2.##运算符 二、预处理指令#undef三、条件编译1.单分支条件编译2.多分支条件编译3.判断符号是否被定义4.判断符号是否没有被定义 四、头文件的包含1.库头文件的包含2.本地头文件的包含3.嵌套包含头文件的解决方法使用条件编译指令使用预处理指令#pr…...

[Linux] linux 软硬链接与动静态库

标题&#xff1a;[Linux] linux 软硬链接与动静态库 个人主页水墨不写bug &#xff08;图片来源于网络&#xff09; /** _oo0oo_* o8888888o* 88" . "88* (| -_- |)* …...

GitHub Actions的 CI/CD

GitHub Actions 是一个强大的 CI/CD 工具&#xff0c;适用于自动化各种开发任务。GitHub Actions 的原理是基于事件驱动的自动化流水线工具&#xff0c;通过定义触发条件和执行步骤&#xff0c;可以让项目在特定条件下自动运行一系列操作&#xff0c;比如构建、测试、部署等。 …...

doris 表结构批量导出

导出 test 数据库中的 table1 表&#xff1a;mysqldump -h127.0.0.1 -P9030 -uroot --no-tablespaces --databases test --tables table1 导出 test 数据库中的 table1 表结构&#xff1a;mysqldump -h127.0.0.1 -P9030 -uroot --no-tablespaces --databases test --tables tab…...

linux查看文件命令

查看文件命令 显示命令 cat 语法&#xff1a;cat 【选项】 文件 选项 命令含义n显示行号包括空行b显示行号不包括空行s压缩空行为一行A显示隐藏字符 cat -n 文件&#xff1a;显示行号包括空行 cat -b 文件 cat -s 文件 cat -A 文件 more和less是 分页查看 tac和rev都…...

macOS Unlocker V3.0:在Windows和Linux上免费运行macOS虚拟机的终极解决方案 [特殊字符]

macOS Unlocker V3.0&#xff1a;在Windows和Linux上免费运行macOS虚拟机的终极解决方案 &#x1f680; 【免费下载链接】unlocker 项目地址: https://gitcode.com/gh_mirrors/unlo/unlocker macOS Unlocker V3.0是一款革命性的开源工具&#xff0c;让您能够在Windows或…...

【限时公开】20年农业AI工程师压箱底的17条精度校验铁律:从田间采集到模型上线零容错实践手册

第一章&#xff1a;农业图像识别精度校验的底层逻辑与行业特殊性农业图像识别并非通用计算机视觉任务的简单迁移&#xff0c;其精度校验需直面田间场景固有的复杂性&#xff1a;光照剧烈波动、作物生长阶段连续变化、病斑形态高度异质、背景杂草与土壤纹理干扰显著。这些因素共…...

在Ubuntu 20.04上搞定OpenFace:一份保姆级安装与避坑指南(含CEN模型和虚拟显示配置)

在Ubuntu 20.04服务器上部署OpenFace的终极实践指南 当你第一次尝试在无图形界面的Ubuntu服务器上部署OpenFace时&#xff0c;是否遇到过那些令人抓狂的报错信息&#xff1f;从缺失的CEN模型到GTK显示问题&#xff0c;每一步都可能成为阻碍你前进的绊脚石。本文将带你穿越这些技…...

《先测量,再优化:写给 Python 开发者的性能实战指南——别让“聪明优化”变成昂贵自嗨》

《先测量&#xff0c;再优化&#xff1a;写给 Python 开发者的性能实战指南——别让“聪明优化”变成昂贵自嗨》 很多 Python 开发者都会经历这样一个阶段&#xff1a;项目一慢&#xff0c;第一反应就是“这段代码得优化”&#xff1b;一看到 for 循环&#xff0c;就想换成列表…...

SCI期刊AI率要求越来越严:一二区5%以下该怎么降

SCI一二区期刊AI率卡到5%以下&#xff0c;我的论文差点废了——后来这么救回来的 2026年开年&#xff0c;身边三个同学的SCI投稿被拒&#xff0c;理由都一样&#xff1a;AI-generated content detected。不是内容不行&#xff0c;是AI率没过关。 我的判断很直接&#xff1a;S…...

泛微E9流程表单转PDF/HTML实战:手把手教你集成档案系统(附完整代码)

泛微E9流程表单转PDF/HTML全流程开发指南&#xff1a;从原理到实战 在企业管理数字化转型的浪潮中&#xff0c;OA系统与档案系统的无缝对接已成为提升组织效能的刚需。作为国内主流的协同办公平台&#xff0c;泛微E9的流程表单承载着企业核心业务流程数据&#xff0c;如何将这些…...

DXVK解决方案:基于Vulkan的Direct3D兼容层性能优化指南

DXVK解决方案&#xff1a;基于Vulkan的Direct3D兼容层性能优化指南 【免费下载链接】dxvk Vulkan-based implementation of D3D9, D3D10 and D3D11 for Linux / Wine 项目地址: https://gitcode.com/gh_mirrors/dx/dxvk DXVK是一个基于Vulkan的Direct3D 8/9/10/11实现层…...

【八股必备】多线程面试题2

第一部分&#xff1a;线程基础与概念篇1. 线程模型面试官&#xff1a;先来个基础题&#xff0c;Java程序里的线程和操作系统线程是什么关系&#xff1f;是一回事吗&#xff1f;候选人&#xff1a;好的。在绝大多数情况下&#xff0c;比如我们常用的Windows、Linux系统&#xff…...

w3x2lni技术指南:魔兽地图跨版本转换的实现与实践

w3x2lni技术指南&#xff1a;魔兽地图跨版本转换的实现与实践 【免费下载链接】w3x2lni 魔兽地图格式转换工具 项目地址: https://gitcode.com/gh_mirrors/w3/w3x2lni 技术原理&#xff1a;跨版本转换的底层架构 w3x2lni作为魔兽地图格式转换的专业工具&#xff0c;其核…...

实验结果与分析篇 | 本科/硕士必备,一文搞定实验结果与分析部分!基于改进 ConvNeXt 的农作物病虫害识别系统

前言 “代码跑通了&#xff0c;论文怎么写&#xff1f;”&#xff0c;这恐怕是无数 CV 算法/人工智能萌新在面对毕设或期刊投稿时最大的痛。纯缝合模型容易被拒&#xff08;看你写作能力了&#xff09;&#xff0c;实验分析写成了干巴巴的报流水账&#xff0c;缺乏深度的理论支…...