uni-app如何不加前缀iconfont使用font-class 图标库

最新推荐文章于 2024-11-22 11:01:09 发布

一撇一画

最新推荐文章于 2024-11-22 11:01:09 发布

阅读量693

点赞数

分类专栏：学习笔记文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_42220283/article/details/110006624

版权

学习笔记专栏收录该内容

51 篇文章

订阅专栏

本文介绍了如何简化阿里图标库的引用方式，通过修改@font-face的字体家族名和在全局样式中设置类名匹配规则，实现不使用前缀即可直接调用图标。这一方法减少了代码冗余，提高了开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

阿里图标我习惯直接写

<text class="icon-xxxx"></text>

所以下载引用的时候把@font-face里的 {font-family: “iconfont”;}，改成{font-family: “icon”;}然后在app.vue样式加上

[class*="icon-"] {
font-family: "icon";
	font-size: inherit;
	font-style: normal;
}

就可不用写前缀了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一撇一画

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uni-app实战之社区交友APP（10）登录、个人空间开发和动画优化

CUFEECR的博客

02-06

1324

开发登录页，并配置顶部返回图标；构建登录页UI；实现验证码登录和账号密码登录切换；对登录表单进行验证，包括未输入禁用按钮、限制验证码点击频率、验证手机号码格式等；第三方登录使用接口。个人空间入口为帖子头像；开发头部组件；个人空间选项卡包括主页、帖子和动态；实现点击选项卡内容动态切换；实现点击右上角菜单按钮弹出操作菜单。通过接口获取缓存信息和清除缓存；新建JS文件用于保存全局配置和工具函数，同时在main.js中挂载；使用接口来获取和监听网络状态；用工具函数实现热更新；给帖子列表和消息列表添加动画效果。

uni-app

Gyanga的博客

04-11

798

一、什么是uni-app uni-app是一个使用Vue.js开发跨平台应用的前端框架。（一套代码可以运行到多个平台）二、uni-app的主要特征 ⭐跨更多平台一套代码、多端发行（uni-app将常用的组件和API进行了跨平台封装）条件编译，对编译环境进行判断，跨端过程中不牺牲平台特色（原生SDK） ⭐运行体验更好（各取所长）组件、api与微信小程序一致兼容weex原生渲染（局部渲染优化） Weex是使用流行的Web开发体验来开发高性能原生应用的框架。（集成WeekSD

参与评论您还未登录，请先登录后发表或查看评论

Uniapp 使用Font Class 引用阿里图标方法

SQ02041104的博客

12-27

638

1.加入购物车(1)----->添加项目(2) ----> 项目设置(3)---->下载至本地(4)4.配置css 文件（@/static/uViewIconfont/）3.放置相应项目下并且在static建一个文件。5.app中进行引用。

uniapp引入iconfont

Shiny_boy_的博客

04-20

628

uniapp以font-class 引用iconfont 本文章主要介绍以font-class的方式引入到uniapp项目的使用方式步骤：默认你已经有了icon账号，官网地址创建自己的项目，并将需要的图标添加到项目中复制代码到自己的uniapp项目中，建议新建一个scss文件，将代码复制到自己的scss文件不建议在App.vue引入，建议在使用的组件中引入即可，如下图在template中使用 <i class="iconfont icon-a-lianji2"

在Uni-App中使用阿里字体图标库

lynn_nobody的博客

11-24

1306

在使用Uni-App框架开发微信小程序时，需要用到阿里字体图标库，本来是在public/index.html中通过link引入了图标的在线地址，通过npm run serve运行到浏览器上可以正常显示；但是npm run dev:mp-weixin之后图标就消失了。所以这里记录一下本地使用阿里字体库的方法。下载首先，选择好你需要的图标，添加至项目；在项目中点击下载至本地（此处下载的是Font class）。解压将压缩包中的代码解压到项目中，可以放在src/static中，也可以在src中新建一个目

Vue中引入icon怎么去掉class里面加的iconfont

Billow_lamb的博客

01-25

422

Vue中引入icon怎么去掉class里面加的iconfont 效果: 但是有一点注意一定要放到全局引入这个css文件

解决uniapp获取base64在ios端自带前缀(不显示)问题

小小前端攻城狮

11-25

2089

base64在安卓需要拼接'data:image/png;base64,' ios自带'data:image/jpg;base64,' base64适配ios安卓 base64在ios不显示

uni-app 本都使用 iconfont

最新发布

02-15

访问阿里巴巴矢量图标库 (Iconfont)，创建并下载所需的图标集。确保所选图标的授权协议允许预期用途[^1]。 #### 整合 Iconfont 到 Uni-app 工程解压下载文件，在`static/fonts/`目录下新建子文件夹放置`.ttf`, `....

Vue3 + Ts + Pinia + uni-app 学习笔记

qq_33365152的博客

09-13

1103

Vue3 +Ts + Pinia + uni-app 学习笔记

uni-app【项目搭建，项目运行】

December_shi的博客

06-04

3489

uni-app环境搭建；项目运行；项目如何配置；基本用法

uniapp或者vue引入在线和离线阿里巴巴iconfont字体图标库

水月灯花的博客

11-09

4263

1、在线引入在当前页面或者uniapp项目的app.vue文件中的全局style样式，导入在线地址，然后使用text标签引入，通过设置font-size可以设置显示大小。首先将字体图标添加至购物车，然后点击购物车，随便选个项目进行添加。然后点击更新代码将其生成后点击复制，注意选择font class 复制地址为任意vue文件的style标签中，复制的地址没有https标签，注意添加使用https 然后在vue的template模板中，使用text标签引入，开头添加iconfo..

自定义控件图标设置以及默认前缀

weixin_34378045的博客

11-22

191

[ToolboxBitmapAttribute(typeof(YourControl), "YourControlIcon.bmp")] public class YourControl: System.Windows.Forms.UserControl { ... }[assembly: TagPrefix("CustomLabel", "xxx")]using System.Web.UI;s...

在uniapp中如何使用icon图标

renshanxk的专栏

12-15

2万+

在uniapp中使用icon图标的方法：首先注册icon账号，挑选自己中意的图标加入购物车，加入购物车；然后添加到自己的项目中，选择【font-class】在新网址地址栏打开图片文件即可。在uniapp中使用icon图标的方法： 1.首先注册icon账号 2.挑选自己中意的图标加入购物车，加入购物车然后添加到自己的项目中 3.在自己的项目中选择font-class 在新网址地址栏打开图片文件 4.把这些文件全部ctrl a c+ v 粘贴到自己项目中icon.scss文件中（建议icon命名以

简简单单三两步，让你学会在uniapp中引入并使用iconfon图标

热门推荐

GengMS的博客

08-22

2万+

uniapp中使用网络字体图标（iconfont）我发现越来越多的人抛弃了像Font Awesome这样的图标库，原来可能是图标过于单调和缺少社区活跃度带来的很多优秀的字体图标创作者，当然上面也可能是我个人的错觉。画不多哔哔，直接开始正题。前言： uniapp中不支持Symbol多色字体，所以我们以下介绍的为Unicode，和Font class在uniapp中的本地引入用法和网络css引入方法 Unicode和font class本地资源引入方法：第一步：第二步：在static目录下新

uni-app常用拓展组件推荐

Eren_acd的博客

04-21

3393

小程序在用户规模及商业化方面都取得了极大的成功。截至2021年12月，微信小程序日活超过4.5亿，支付宝、百度、头条小程序的月活也都超过了3亿。对应小程序开发领域，开发框架从单纯的微信小程序开发过渡到多端框架成为标配，进一步提升开发效率成为开发者的强烈需求。

uniapp+uView输入框添加自定义图标

weixin_43815740的博客

11-22

916

这种方式不好修改图标的大小。

uni-app 上拉加载，下拉刷新

weixin_71574589的博客

10-08

485

uni-app

uni-app 图标库整合最佳实践：使用 iconfont 构建属于自己的图标库

前端梦工厂

11-06

3040

阿里巴巴矢量图标库是一种图标字体库，它将图标转换为字体的形式，并通过unicode编码进行引用。通过使用iconfont，开发者可以使用字体图标代替传统的图片图标，以提高网页加载速度和图标的灵活性。iconfont中的图标可以使用 CSS 进行样式控制，并且可以根据需要进行缩放、颜色调整等操作，非常方便。官方链接：iconfont - 阿里巴巴矢量图标库通过本篇文章，我们了解了在前端项目中使用 iconfont 自定义图标库的方法和步骤。

uniapp 自定义图标icon

m0_46554818的博客

08-06

1万+

uniapp 自定义图标超级简单准备工作：例如上边的图标，我们发现都是蓝白切换，这时候用img整个项目就太大了，占内存，这是我们可以把他做成uniapp内置的icon图标。准备工作： 1.先把图片以svg格式导入阿里图标库（用ps把png格式图片转化成svg格式没用，这一步可以让设计直接上传阿里图标库，提前把png图片命名好发给设计部）类似这种（其实白色的精灵图可以不用命名） 2.去uniapp插件市场下载 iconfont 插件（iconfont插件）下载好放入文件的组件部分，如下图：