uni-app 中使用iconfont图标

uniapp引入iconfont图标

在Unibest项目中动态加载Iconify图标的正确写法 问题背景 在Unibest项目中使用Iconify图标时，开发者可能会遇到动态加载图标无法显示的问题。这通常是由于Unocss无法正确识别动态生成的类名导致的。 静态加载与动态加载的区别 静态加载图标时，直接使用完整的类名可以正常工作： <view class="i-icon-park-outline-home"...

uniapp 使用在线 iconfont 图标

在Uniapp中实现在线使用iconfont的图标；在自己建的项目下：点击Font Class可以看到下面的在线 css文件。

uniapp导航栏使用iconfont来配置多个按钮。

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。uni-app在手，做啥都不愁。即使不跨端，

custom-prefix 对应 font-family ，type 对应 icon 后缀带的图标名。font-family 可以用默认的也可以自己命名，我这里是改了的，要改三个地方。全局引入在App.vue中引入，在 标签下引入。局部引入，在需要用到的页面引入，方法一样。iconfont-阿里巴巴矢量图标库。

uniapp 中使用彩色的 iconfont1、在自己图标库项目中下载到本地：2、解压3、shift+右键打开powershell窗口执行一下代码npm install -g iconfont-tools4、在步骤2解压的文件中执行命令行 （shift+右键打开powershell窗口也行）iconfont-tools按一下操作5、目录会多了个iconfont-weapp文件...

本篇文章主要介绍如果一次简单快速成功在uniapp小程序引入iconfont图标，按照步骤来，保证你一次成功！！！！

uniapp在线引入iconfont图标 1.登录iconfont账号(本人使用微博账号登录) 2.创建项目 > 以lianxi项目为例 3.选择自己用到的图标加入到项目 4.生成CSS代码 5.复制代码到浏览器打开，前面加https: 6.复制生成的代码到自己项目中并在所有url开头的代码前面加https:（需要自己创建一个css文件） 7.最后在项目中使用即可 <view class="iconfont icondengji"></view> iconfo

2.将解压后的文件（如iconfont.css和字体文件）放入uni-app项目的。如果使用iconfont就可以解决这些问题,图标会类似于文字,可以自由调整大小和颜色。在uniapp项目中使用图标,一般会放在static文件夹下,会有两个问题。2.如果图标是png,jpg等格式,如果宽高设置过大会不清晰,影响用户体验。1.下载包含所选图标的iconfont项目文件，并将其解压。3.创建或选择一个项目，将购物车中的图标添加到该项目中。1.如果图标过多,会造成打包项目过大,会影响小程序打包。

​ 本文示例在 uniapp 项目中对 Iconify 字体图标库的安装和使用（Iconify 字体图标库是一个免费开源的图标库，它拥有超过20万个开源矢量图标。）

小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的

如果你系统 有HBuilder X 就会自动打开 要你选择安装在哪一个项目里 如果你的HBuilder X有项目在运行 则无法安装。这里 我们只需要两个 size 控制尺寸大小的 type 控制图标的方案 类型 他让我们参考案例。直接在输入框中 搜索 uni-icons 下面内容就都出来了。先看下面的 API 看看每个字段都是干什么的。安装成功后 我们继续回到刚才的文档。uni的组件都可以直接进入官网。这里就有非常多的图标给我选。在最上面先点击下载和按在。