【UniApp】uniapp引入iconfont图标及使用方式
🧊 前言
本文主要讲述的是在使用uniapp中如何引入iconfont图标，以及两种常用的位置。
位置一：App下原生导航栏的按钮使用字体图标。
位置二：页面中的任意位置使用iconfont图标。
🌺 正文
第一步：打开iconfont官网新建项目并添加自己所需要的图标
这里是iconfont的网址链接： iconfon官网
新建项目
不要勾选彩色，会导致在项目中无法修改字体颜色及样式，本人亲测，找了半天解决办法最终悔恨不已
App下原生导航栏的按钮如果使用字体图标，注意检查字体库的名字（font-family）是否使用了默认的 iconfont，这个名字是保留字，不能作为外部引入的字体库的名字，需要调整为自定义的名称，否则无法显示
按钮上显示的文字。使用字体图标时 unicode 字符表示必须 ‘\u’ 开头，如 “\ue123”（注意不能写成"\e123"）。
选择自己需要的图标加入购物车再添加到项目中
第二步：下载我们所需要的iconfont.css文件并引入到项目中
下载项目并解压
将iconfont.css文件复制放到我们的项目中去，一般放在static静态文件目录下
第三步：修改iconfont.css文件中的内容并全局引用
需要注意的是，当我们在项目中新添加了图标后，需要重新复制修改iconfont.css中的内容，要不然新添加的图标是找不到的
在移动端引用的时候要在App.vue文件中进行全局注册，而不是main.js中
第四步：使用iconfont图标进行开发
在开发中我们常用的有两种方式，这两种方式以及注意事项我在以下内容都有演示：
在页面文件中直接使用标签
使用APPplus原生的自定义导航栏iconfont右侧自定义图标
1.在页面文件中直接使用标签
两种方式代码的获取方式如下图所示：
使用uniCode码
Font Class 名称
2.使用APPplus原生的自定义导航栏iconfont右侧自定义图标
使用iconfont图标的文件内容（忽略css样式）：
需要配合static目录下的iconfont.tff文件，这个文件在我们下载到本地的时候那个目录中，与iconfont.css在一个目录中：
pages.json文件中配置iconfont图标：
这三步完成，我们配置自定义原生导航栏的自定义图标就完成啦！
五：需要注意的点写在这里：
iconfont官网创建项目的时候，不要勾选 彩 色 \textcolor{red} {彩色} 彩色 那个多选框，否则使用的时候不能更改颜色
如果项目重新添加了新的图标，需要重新生成在线链接，更新
iconfont.css文件自定义原生导航栏使用iconfont图标时，必须配合
iconfont.ttf文件使用
🎃专栏分享：
本篇：
《uniapp中引入iconfont图标及两种常见的使用方式》更新到这里就结束啦，有什么不理解的地方欢迎评论区见哦。不苒在这里祝大家1024程序员节快乐。小程序项目实战专栏：《uniapp小程序开发》
前端面试专栏地址：《面试必看》
猜你喜欢
- 【UniApp】uniapp数据更新却没有渲染页面怎么办
- 随着移动互联网的快速发展，移动应用程序也越来越普及，很多企业和开发者都选择使用跨平台开发工具来开发移动应用程序。Uniapp作为当前最热门的跨平台移动应用开发框架之一，因其可一次编写代码，多平台运行的优点而受到开发者的广泛青睐。然而，有时候我们在使用Uniapp进行开发时，会遇到数据更新却没有渲染页面的情况。那么，我们该如何解决这个问题呢？首先，我们需要了解这个问题产生的原因。一般来说，数据更新却没有渲染页面的问题，是由于数据更新后，Vue组件没有自动重新渲染造成的。这是因为Vue的响
- 【UniApp】如何在uniapp中实现图片上传和预览
- 如何在uniapp中实现图片上传和预览在现代社交网络和电子商务应用中，图片上传和预览功能是非常常见的需求。本文将介绍如何在uniapp中实现图片上传和预览的功能，并给出具体的代码示例。一、图片上传功能的实现在uniapp项目中，首先需要在页面中添加一个图片上传组件，如下所示：<template> <view> <image v-for="(item, in
- 【UniApp】uniapp替换字符串
- 1 如果是字符串，可以直接调用replace()方法，但是引用字符串的变量调用replace方法会失败。let text = "Visit Microsoft!";let result = text.replace("Microsoft", "W3School");运行过是不成功的。2 成功的方法是，先把字符串分割成数组，接着再修改，最后连接起来 &nbs
- 【UniApp】uniapp怎么设置边框样式
- Uniapp是一款开源的跨平台移动端开发框架，可以帮助开发者快速实现应用程序的设计和实现。在开发中，设置边框是相当重要的一项工作，可以有效的提高程序的美观度和用户体验度。本文将使用Uniapp框架，介绍如何设置边框，让你的移动应用更加美观和有质感。一、基础设置设置边框可以使用CSS的border样式，常用的参数包括：宽度、线条类型、颜色等。具体使用方法如下：border: [width] [line-style] [color];其中最常用的参数包括宽度和
- 【UniApp】利用uniapp实现图片压缩功能
- 利用uniapp实现图片压缩功能随着手机拍照功能的提升，我们在日常生活中经常会拍摄大量的照片。然而，这些高像素的照片占据了手机的存储空间，使手机变得缓慢且容易存满。为了解决这个问题，我们可以利用uniapp中的相关技术，实现图片压缩功能，将图片压缩至更小的文件大小，保留合适的像素和画质。下面我们将详细介绍在uniapp中如何实现图片压缩功能。步骤一：引入相关插件首先，我们需要在uniapp项目中引入相关的插件。最常用的图片压缩插件是uni-image-compress，它基于image
- 【UniApp】如何在uniapp中实现智能推荐和个性化推送
- 如何在uniapp中实现智能推荐和个性化推送随着移动互联网的快速发展，用户在使用手机应用的过程中，希望能够得到个性化、智能化的推荐服务。在uniapp框架中，我们可以利用一些常用的技术手段，实现智能推荐和个性化推送功能。本文将介绍如何在uniapp中实现这两个功能，并提供具体的代码示例。一、智能推荐算法智能推荐是一种根据用户的行为和偏好，自动给用户推荐最相关的内容。常见的智能推荐算法有基于协同过滤的算法、基于内容的算法和基于深度学习的算法。在uniapp中，我们可以使用uniCloud
- 【UniApp】uniapp全局方法怎么使用
- uniapp是一款基于Vue.js框架开发的跨平台开发框架，可以通过编写一套代码，同时在iOS、Android、H5等多个平台上运行。在uniapp中，我们可以使用全局方法来方便地进行公共方法的调用。本文将介绍uniapp全局方法的定义和使用。一、定义全局方法在uniapp中定义全局方法需要用到Vue.prototype.$xxxx = function()这个语法，其中xxxx是方法名称。示例代码如下：Vue.prototype.$formatDate = fun
- 【UniApp】uniapp如何实现多端统一开发
- Uniapp是一个基于vue.js的框架，可以实现一次开发，多端发布，包括了H5、小程序、App等多个平台。本文将介绍如何使用Uniapp实现多端统一开发，并附上代码示例。一、项目创建和配置在HBuilderX中创建Uniapp项目，选择需要开发的目标平台。在项目的manifest.json文件中配置App基本信息，比如包名、版本号等。配置项目的各平台的自定义配置，比如小程序的appid等。二、组件和样式的开发Uniapp支持使用vue.js的组件和样式进行开发，在不同平台上的样式和组