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

请看以下的详细讲解:

一、前置准备工作

在进行外部字体库iconfont的图标引入之前,需要先确保以下工作已经完成:

  1. 在微信公众平台中创建小程序,并获得小程序的APPID。

  2. 在iconfont(https://www.iconfont.cn/)中选择需要引入的字体库,并下载当前字体库的包。

二、引入iconfont字体库

  1. 解压下载的字体包,将其中的iconfont.ttf文件添加到小程序项目文件夹中,例如/assets/fonts/下。

  2. 进入小程序项目,找到app.wxss文件,并在其中进行如下配置:

/* 引入iconfont字体 */
@font-face {
  font-family: 'iconfont';
  src: url('/assets/fonts/iconfont.ttf') format('truetype');
}

以上代码表示,添加一个名为iconfont的字体,并将其绑定为/assets/fonts/iconfont.ttf中指定的TrueType字体。

  1. 在app.wxss中引入iconfont字体库,以供其他页面进行使用:
@import url('//at.alicdn.com/t/font_xxxxxx_xxxxxxx.css');

此处,xxxxxx_xxxxxxx是你字体库图标变量唯一的class类名。

例如,假设你的字体库调用变量名为icon-edit,那么完整的引入代码应为:

@import url('//at.alicdn.com/t/font_xxxxxx_xxxxxxx.css');
.icon-edit::before {
  font-family: 'iconfont';
  content: '\e619';
}
  1. 在小程序的页面中使用iconfont字体库,以便引入特定图标。

例如,在wxml页面中,可以使用如下代码进行icon图标的引用:

<text class="iconfont icon-edit"></text>

此代码表示在页面中添加一个类为icon-edit的字体图标,调用iconfont字体库。文本部分采用<text>标签表示。

三、示例说明

下面,我们通过两个示例演示iconfont引入方式的具体实现。

示例1:

例如,我们需要在小程序页面中添加一个edit(编辑)图标,则可以按照如下过程进行操作:

  1. 打开iconfont平台,搜索“edit”,找到合适的图标库,并下载代码包。

  2. 解压代码包,并找出其中的“iconfont.ttf”字体文件。

  3. 将字体文件加入到小程序项目的文件中,例如在“/assets/fonts/”文件夹下。

  4. 在小程序项目根目录的app.wxss文件中,加入如下代码:

/* 引入iconfont字体 */
@import url('//at.alicdn.com/t/font_xxxxxx_xxxxxxx.css');
@font-face {
  font-family: 'iconfont';
  src: url('/assets/fonts/iconfont.ttf') format('truetype');
}
  1. 在相应的wxml页面中,使用如下代码进行图标的调用:
<text class="iconfont icon-edit"></text>

此处,icon-edit是当前字体库变量唯一的类名。

示例2:

假如我们需要在小程序页面中添加一个搜索(search)图标,则可以按照如下步骤进行操作:

  1. 打开iconfont平台,搜索“search”,找到合适的图标库并下载代码包。

  2. 解压代码包,并找出其中的“iconfont.ttf”字体文件。

  3. 在小程序项目中加入字体文件,并在根目录下的app.wxss文件中加入如下代码:

/* 引入iconfont字体 */
@import url('//at.alicdn.com/t/font_xxxxxx_xxxxxxx.css');
@font-face {
  font-family: 'iconfont';
  src: url('/assets/fonts/iconfont.ttf') format('truetype');
}
  1. 在wxml页面中使用如下代码进行调用:
<text class="iconfont icon-search"></text>

此处,icon-search是当前字体库变量唯一的类名。

以上两个示例中的代码可以根据具体情况进行调整和扩展。此外,也可以通过在app.wxss中添加其他样式,来改变字体库图标的大小、颜色等,以符合需求。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:微信小程序 如何引入外部字体库iconfont的图标 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • 微信小程序实现时间预约功能

    微信小程序实现时间预约功能攻略 一、背景 微信小程序可以在微信中无需下载安装即可使用的一种应用,很受用户欢迎。实现时间预约功能,可以让用户在线提交预约需求,从而提高用户体验。 二、实现步骤 本攻略中,我们以微信开发者工具为例,演示如何实现时间预约功能。 2.1 创建页面 首先,在微信开发者工具中创建一个新页面,页面名称为「appointment」。 2.2 …

    css 2023年6月10日
    00
  • ANT 压缩(去掉空格/注释)JS文件可提高js运行速度

    对于前端项目,JavaScript文件往往是最大的一个个体文件,优化他的运行速度对整个网站性能的提升是极为重要的。使用ANT工具可以压缩JavaScript文件,去掉一些不必要的空格和注释,并且经过压缩后的文件不会对原有的代码结构和逻辑产生任何影响。 以下是使用ANT压缩JavaScript文件的完整攻略: 1、安装ANT 首先你需要安装ANT工具,可在官网…

    css 2023年6月9日
    00
  • CSS实现镂空遮罩效果

    以下是“CSS实现镂空遮罩效果”的完整攻略。 镂空遮罩效果介绍 镂空遮罩效果是一种常见的UI设计效果,它可以通过遮罩层将页面的某一部分内容隐藏起来,同时显示出底部的内容,并在遮罩层上通过一定的形状绘制出一些空洞或者图案,使得底部内容可见。 实现过程 在实现镂空遮罩效果之前,首先需要明确的是,该效果必须在背景上实现。也就是说,我们需要为网页设置一张背景图,并且…

    css 2023年6月9日
    00
  • CSS3中的clip-path使用攻略

    “CSS3中的clip-path使用攻略”指的是使用CSS3中的clip-path属性对网页元素进行剪裁处理的技巧。下面是完整的攻略: clip-path的概念和基础用法 clip-path是CSS3中的一个属性,用于对网页中的元素进行剪裁。使用它可以去掉元素的一部分区域,或是将元素剪裁成指定的形状。具体用法如下: .elem { clip-path: po…

    css 2023年6月10日
    00
  • IE9+已经不对document.createElement向下兼容的解决方法

    IE9+不再对document.createElement向下兼容,主要原因是因为IE9以下的版本存在一些安全隐患。因此,我们需要寻找一些解决方法来兼容IE9+。 解决方法 1. 使用createElementNS方法 createElementNS(namespaceURI, qualifiedName)方法是createElement方法的一个变体,它可…

    css 2023年6月10日
    00
  • js 获取屏幕各种宽高的方法(浏览器兼容)

    获取屏幕各种宽高是JS中常见的需求之一。不同屏幕大小、分辨率、设备类型对于页面要展示的内容影响很大。下面是JS获取屏幕各种宽高的方法及浏览器兼容性的攻略。 获取屏幕分辨率 我们可以使用window.screen.width和window.screen.height获取屏幕分辨率,这两个属性返回的是数值型数据,单位是像素,例如: console.log(win…

    css 2023年6月10日
    00
  • Webpack中publicPath使用详解

    让我来详细讲解“Webpack中publicPath使用详解”的完整攻略。 什么是publicPath publicPath是webpack中一个重要的配置项,它指定了在浏览器中引用静态资源时的路径前缀。在webpack打包生成的输出文件中,所有资源的引用路径都是以publicPath为前缀的。publicPath可以是一个相对路径,也可以是一个完整的URL…

    css 2023年6月9日
    00
  • BootStrap入门教程(三)之响应式原理

    下面我会详细讲解“BootStrap入门教程(三)之响应式原理”的完整攻略。 1. 引言 在现代 web 开发中,响应式布局已经成为必备技能。因此,学习 Bootstrap 框架的响应式原理,对我们深入了解前端开发是很有帮助的。 2. Bootstrap 响应式原理 Bootstrap 的响应式原理是基于 CSS 媒体查询的。它通过为不同的屏幕宽度设置不同的…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部