iconfont图标在app-plus中使用

最新推荐文章于 2024-08-20 14:24:16 发布
置顶 最新推荐文章于 2024-08-20 14:24:16 发布
阅读量1.2k 收藏 1
点赞数 4
分类专栏： uni-app 文章标签： 小程序 vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45784580/article/details/104973905
版权
本文介绍了在app-plus环境中使用iconfont图标的详细步骤，包括添加图标库到项目，下载ttf文件，引入css样式，并提供了查看图标颜色的方法。

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

iconfontt图标在app-plus中怎么用呢

（传送门）

1、添加入库
在这里插入图片描述
2、添加至项目（如果没有项目，新建一个就是啦）
在这里插入图片描述
3、下载自本地
在这里插入图片描述
4、打开压缩包，找到（ iconfont.ttf ），移自你项目文件夹里
在这里插入图片描述
5、打开 iconfont.css（往下翻，找到）
在这里插入图片描述
6

最低0.47元/天 解锁文章
Vue3+ElementPlus项目使用iconfont阿里图标
qq_45438471的博客
09-11 5667
回顾一下上篇文章的内容，Element UI 使用的是阿里巴巴的图标库，通过字体图标的用法（即使用 el-icon-xxx 的类名）来引入图标。。而Element Plus 抛弃了字体图标的用法，而直接使用了 svg 图标。   那么在Element Plus框架内使用阿里图标又该如何实现？本篇文章就是讲述Vue3+ElementPlus项目使用iconfont阿里图标的方法。
H5+微信小程序中顶部导航设置：app-plus
bjt1015999的博客
02-26 4526
H5+微信小程序中顶部导航设置：app-plus，通过titleNView下的各种配置实现，主要是考虑两者的兼容问题
iconfont-plus:新版iconfont仓库，代码暂时不使用开源的条件。主要作为issues的仓库，不排除以后直接把代码在此开源
03-22
iconfont-plus 新版本的图标字体仓库，代码暂时不包含开源的条件。主要是问题的仓库，不排除以后直接把代码放在此开源。
关于uni-app App-plus中iconfont图标的引入没效果，博主踩过的坑
梦之所以
05-19 5293
在做项目的时候，我们可能习惯性的会选择font-class类型 然后在线拷贝css文件，添加到项目文件中，结果到了app-plus时，发现还缺少ttf文件的引入 "buttons": [{ "fontSrc": "/static/iconfont.ttf", "text": "\ue66e", "fontSize": "26", "color": "#fff", "float": "left", "backgr
Element-Plus搭建CMS页面结构 引入第三方图标库iconfont（详细）
weixin_47906106的博客
07-13 2477
element plus组件库是由饿了么前端团队专门针对vue框架开发的组件库，专门用于电脑端网页的。因为里面集成了很多组件，所以使用他可以非常快速的帮我们实现网站的开发。因为图标需要在整个项目的任意地方使用，可以在public/index.html 中加载。注意：class=“iconfont” 是固定写法 后面跟那边复制的代码。如果elementui中的图标没有你想要的可以使用其它第三方的。引入的时候也是分成两种，一种是全部引入，一种是按需引入。在需要使用的地方引入。
uniapp 使用app-plus自定义导航栏(titleNView)右侧自定义图标+文字按钮
热门推荐
路虽远行则将至，事虽难做则必成。
06-13 1万+
最近在使用uni-app写H5移动端时候，在pages.json文件配置导航栏的图标时发现不生效去官网查阅了很久，意思是不支持本地图片，支持iconfont.ttf（iconfont本地下载）格式图片意思是在导航栏的图标需要在iconfont图标库找好以下载本地形式放到项目资源文件夹titleNView配置实现过程1.登录iconfont图标库网站找图标下载-iconfont-阿里巴巴矢量图标库2.把下载解压的文件放在static文件下-里面文件结构如此。
Element-plus el-input 添加图标
CMDN123456的博客
08-20 640
Element-plus el-input 添加图标
Vue3+Element Plus使用svg加载iconfont的解决方案
发果叁
08-20 3629
本文详细介绍了如何在Element Plus中使用iconfont，简单的说就是要将其封装成SVG，并且支持动态修改颜色。虽然操作上不难，但是容易踩一些坑，你学会了吗？
IconFont 使用指南
weixin_30765505的博客
11-20 597
作为后端开发人员，但对前端也是情有独钟，小公司呆久了啥活也干的缘故吧，总想着多Get点新技能。这不最近H5写的移动端页面需要配备几个Icon，之前用的那套UI的Icon就那几个，不能满足要求，而且样式调用直接就是css，Icon直接在字体文件内。这可把我难住了，用啥软件打开？如何把下载好的图标导入进去？一番查阅后，原来之前下载Icon的网站已经具备这样的高大上功能，只是没有发现而已，先贴个网址 h...
uni-app 配置项目底部选项卡 tabbr配置
热爱编程的男孩子
04-08 892
链图标官网: iconfont.. pages.json pages是我们注册文件或一些页面窗口表现的设置。 globalstyle：页面窗口的所有配置。 配置其他平台特有样式： "app-plus":{}, "mp-weixin":{}, "h5":{} testdemo：三个底座，三个页面 { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
iconfont在vue项目中的使用及如何在一个项目中引入多个iconfont图标库
greed
11-28 3192
有的时候在一个项目的基础上,把当前的项目改为另一个项目,不想影响到当前的字体图标,或者不知道之前的字体图标管理的图标库在哪里了.再引入一个新的字体图标库不失为一个好办法,那么如何避免两个图标库产生冲突就是我们首要解决的问题。我这里为了方便展示把iconfont.css引入app.scss。之后把app.scss引入到main.js中。
png转iconfont_关于阿里图标库Iconfont生成图标的三种使用方式-新闻详情
weixin_39651735的博客
12-21 884
关于阿里图标库Iconfont生成图标的三种使用方式发布时间：2017-07-28责任编辑：朱明 浏览：1843相信做过前端的都知道阿里巴巴矢量图标库，这是一个非常好用的添加小图标的方法，而且是完全免费的，可以在线使用也可以下载到本地使用，而且图标是作为字体插入，不仅可以改变颜色大小，可以添加一些视觉效果如：阴影、旋转、透明度。而且在布局方面也非常方便。网址：http://www.iconfon...
阿里iconfont图标使用
Cool的博客
09-29 4378
1.先登录阿里图标 http://www.iconfont.cn 2.加入购物车定制自己的项目图标 3.下载或者使用网络资源，在iconfont.css可以查看到自己要的图标     @font-face { font-family: 'iconfont'; src: url('http://at.alicdn.com/t/font_1474796923_6082804....
iconfont图标_小程序使用 Iconfont 的正确姿势
weixin_39598135的博客
11-23 349
前言现如今移动设备分辨率不胜枚举，传统的标量图标要分别导出 1 倍图、2 倍图、3 倍图等以适应高分辩率设备。这无疑大大增加了设计师和客户端开发的工作量。矢量图以其无损缩放的优点，在图标方面有着极大的优势。Iconfont 是由阿里推出，功能强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能，几乎国内成了矢量图标库的事实标准。每个 Iconfont 项目都可以生成一个远程...
uniapp修改导航栏的文字和图标并触发事件
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
03-28 2933
uniapp导航栏自定义文字图标设置
开发日记(04) - iconfont 挂了，项目内的图标怎么办？
SunSeekerX
07-24 1614
iconfont 应该是挂了有 1-2 两个月了，不管是因为什么原因，肯定会有一大堆的项目有一阵子图标出不来。
uni-app 使用中导入导航栏的字体图标
小火车况且况且况且的博客
12-26 1671
uni-app 使用中导入导航栏的字体图标 注意 ： 导入的只能放入 放入static文件目录下面 这里的字体图标使用的是IconFont阿里巴巴矢量图标库 将文件下载好之后 拿出iconfont.ttf文件 放入static文件目录下面 放入static文件目录下面 放入static文件目录下面 在pages.json中配置 uni-app的详细配置 fontSrc图片的地址 只能...
uniapp系列-03顶部图标and文字开发
mylamb的博客
09-20 273
在"app-plus"中添加fontSrc的地址,即"./static/iconfont.ttf"需要注意的是,这个顶部导航只在app中有,小程序中是无法显示的,小程序的添加方法后续再说,埋坑。再添加"text",iconfont中拿这个代码。这个图标代码复制完后需要修改一下变为\u开头。在pages.json中的"style"下。1.更改顶部文字及背景颜色。我们需要修改为\ue622。2.左右两边的图标按钮。复制的代码原本为 。
ICONFONT在APP中的使用
农场老马的专栏
06-11 8202
阿里IconFont平台 http://www.iconfont.cn/ 这里是阿里巴巴UED部门开发的IconFont平台，目前阿里系的重量级产品都在使用，里面有很多资源可供使用。这里说说如何在客户端内使用。 IconFont虽然看起来是图标，实际原理跟字体的实现方式是一样的，所以我们把每个Icon当作一个特殊的文字来理解和处理。 IconFont使用 1、首先登录
vue3 element-plus引入iconfont
最新发布
02-22
### 如何在Vue3项目中使用Element Plus UI库引入Iconfont图标 为了在Vue3项目中集成 Iconfont 图标并配合 Element Plus 使用，可以按照如下方法操作： #### 安装依赖包 首先，在终端执行命令安装 `element-plus` 和 `axios` (用于加载在线字体文件)[^1]: ```bash npm install element-plus axios --save ``` #### 引入Element Plus和配置样式 接着，在项目的入口文件（通常是 main.js 或者 setup 文件）里全局注册 ElementPlus 组件以及导入 CSS 样式[^2]: ```javascript import { createApp } from 'vue' import App from './App.vue' // 导入整个 Element Plus 库及其默认主题样式表 import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; const app = createApp(App); app.use(ElementPlus); // 注册 Element Plus 插件 app.mount('#app'); ``` #### 添加Iconfont链接到HTML头部 编辑 public/index.html 文件，在 `<head>` 部分加入阿里云矢量图标的 CDN 地址[^3]: ```html <!DOCTYPE html> <html lang="en"> <head> <!-- ... --> <link rel="stylesheet" href="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css"> <!-- 替换成自己的iconfont URL --> </head> <body> ... </body> </html> ``` #### 创建自定义组件来封装Iconfont 创建一个新的 Vue 单文件组件 `src/components/IconFont.vue`, 将其作为可重用的图标展示容器: ```vue <template> <span :class="'iconfont '+props.iconClass"></span> </template> <script setup> defineProps({ iconClass: String, }); </script> <style scoped> @import url('//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css'); /* 可选 */ .iconfont { font-family:"iconfont" !important; } </style> ``` #### 在页面上应用新的图标组件 最后可以在任何地方通过下面的方式调用这个新组建显示所需图标了[^4]: ```vue <!-- Example usage within another component template --> <el-button type="primary"> <template #icon> <IconFont icon-class="icon-home"/> </template> Home Page </el-button> ``` 以上就是在 Vue3 中结合 Element Plus 来使用 Iconfont 的基本流程。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值