在微信小程序中如何引入iconfont

1年前作者：sayyy分类：Toy博客阅读(15)违法举报

这篇具有很好参考价值的文章主要介绍了在微信小程序中如何引入iconfont。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

略

iconfont 介绍

iconfont 指 https://www.iconfont.cn/。
通过 iconfont 可组建自己的图标库。

iconfont 组建图标库并下载

1. 通过 iconfont 可组建自己的图标库

注册帐号
创建项目
添加图标

2. 项目设置：生成base64格式的字体

微信小程序引入iconfont,微信小程序,微信小程序

Font Family：默认为iconfont。当项目中已有iconfont名称的字体时，需要使用不同的名字。

3. 下载至本地

略

4. 解压备用

微信小程序引入iconfont,微信小程序,微信小程序

将 iconfont 添加到小程序中

1. 将css该名称wxss

将iconfont.css重命名为iconfont20231007.wxss

2. 将文件复制到font目录

将iconfont20231007.wxss文件复制到小程序的font目录（没有该目录时，可手动创建。其它目录也可以，比较灵活）。
微信小程序引入iconfont,微信小程序,微信小程序

3. 在app.wxss文件中引入iconfont文件

@import 'font/iconfont20231007.wxss';

微信小程序引入iconfont,微信小程序,微信小程序文章来源地址https://www.toymoban.com/news/detail-769330.html

在小程序中使用字体

<view>首页
<text class="iconfont20231007 icon-zhankai"></text>
</view>

到了这里，关于在微信小程序中如何引入iconfont的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

如何在微信小程序中使用less开发
第一步：直接先在 vscode 安装 easy-less 插件第二步：点击微信开发者工具的扩展按钮，再点击扩展下的三个小点，选择从已解包的扩展文件夹安装第三步：选择这个less文件夹第四步：设置输出.wxss 到这里还差最后一步，因为Easy-less，默认输出的css，但是小程序中要使用.wxs
2024年04月27日
浏览(13)
在微信小程序中如何改变默认打开的页面
在微信小程序中，在我们编写页面的时候，可能会在重新渲染的时候导致页面跳转到默认打开的页面上，为了提升用户的一个体验，我们可以设置一些内容来修改小程序默认打开的页面，提升开发者的开发体验。当我们打开一个微信小程序的时候，这里是普通编译那么，我
2024年02月03日
浏览(29)
在微信小程序中如何配置腾讯位置服务并调用
因为很多服务都已经被封装好了，所以我们只需要调用引入配置就行了。下面进入正题，我们要先先注册一个账号，然后点击控制台，进去以后找到左侧的应用管理，然后点击创建应用，创建完成以后点击添加key 添加好以后点编辑然后填写好相应的信息然后我们要下载
2024年02月09日
浏览(9)
如何在微信小程序中实现音视频通话
微信小程序的音视频通话可以通过微信提供的实时音视频能力实现。这个能力包括了音视频采集、编码、传输和解码等多个环节，开发者只需要使用微信提供的 API 接口就可以轻松地实现音视频通话功能。在具体实现上，开发者需要先在微信开放平台上注册并创建小程序，然
2023年04月09日
浏览(8)
如何在微信小程序中加载自己的地图数据
由于微信小程序无法进行DOM操作，导致像openlayers、leaflet这种常用的js库无法在微信小程序内使用，导致加载高德、百度、mapbox还有自定义的瓦片地图数据变得很困难。目前，大多数情况下是使用以下三种方法实现加载自定义的瓦片数据。 1. 使用web-view 优势：可以使用丰富的
2024年02月10日
浏览(6)
在微信小程序中如何使用Loading组件显示载入动画
Loading组件是微信小程序中常用的一种UI组件，用于在数据加载过程中显示载入动画，提高用户体验。本文将详细介绍如何在微信小程序中使用Loading组件，并提供相应的源代码示例。创建Loading组件首先，在小程序的组件文件夹中创建一个名为\\\"loading\\\"的文件夹，并在该文件夹下
2024年02月03日
浏览(3)
如何在微信小程序中使用less来编写css
在微信小程序中使用 Less 需要一些额外的配置步骤,因为小程序本身不支持直接引用 Less 文件。我们可以借助 Webpack 进行构建,使用一些 loader 来编译 Less 文件。以下是具体步骤: 初始化项目使用微信开发者工具新建一个小程序项目,或在已有项目的基础上操作。安装依赖使用
2024年04月09日
浏览(5)
uniapp项目如何运行在微信小程序模拟器上
在HbuilderX中的小程序写完后自己一定要保存，否则会出不来效果那么怎么让uniapp项目运行在微信小程序开发工具中呢 1 在hbuilderx中点击运行到小程序模拟器 2 然后在项目目录中会生成一个文件夹在微信小程序开发软件中的工具安全设置打开端口或者在微信小程序中导入项目
2024年02月13日
浏览(7)
如何在微信小程序中生成二维码：一个最简单的案例就让你明白
使用weapp.qrcode.js 在微信小程序中，快速生成二维码下载weapp-qrcode代码然后将 dist 目录下的weapp.qrcode.esm.js 复制到项目目录中（这里是utils目录下） 1、小程序wxml文件创建 canvas，并定义好 width, height, canvasId 2、小程序js代码非常简单的案例，onLoad函数直接生成二维码运
2024年02月12日
浏览(29)
如何在微信小程序里面使用npm安装第三方插件（以安装vant ui为例）
1.在cmd里或者是终端里，找到对应的项目，并执行下面的命令，用来初始化package.json文件。 2.勾选下图选项 3.执行下面的命令安装vant ui 然后你会发现多了一个node_modules文件，里面存的就是第三方组件。 4.最后一步，每次安装完一个新的第三方插件都要执行“构建npm” 执行完
2024年02月14日
浏览(30)