uni-app引入自定义图标库

最新推荐文章于 2025-10-10 08:48:05 发布
原创 最新推荐文章于 2025-10-10 08:48:05 发布 · 1.1k 阅读 · 25 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app

部署运行你感兴趣的模型镜像

3.修改iconont.css里的@font-face（保留base64字体图标）

删除划线部分，保留结尾分号。

在这里插入图片描述

删除后：

@font-face {font-family: “iconfont”;

src:url(‘data:application/x-font-woff2;charset=utf-8;base64,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’) format(‘woff2’);

}

4.在App.vue中引入iconfont.css文件

在这里插入图片描述

5.引入后所有页面都可以使用字体图标了（class里的icon,iconfont iconcuxiaopindingdan3x都是必须有的）

方法二：

1.修改iconont.css里的@font-face

2.保留font-family: ‘iconfont’; 保留src属性，src里的url设置为线上链接

url(‘https://at.alicdn.com/t/font_1954674_uk7a480jp8.ttf’) format(‘truetype’);

3.要给url加上https前缀

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

Vue部分截图

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

Stable-Diffusion-3.5

图片生成
Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率

参考信息
关注
精选资源
uni-app-日历组件
08-12
uni-app作为一个跨平台的开发框架，提供了丰富的组件库，其中包括了日历组件（uni-calendar），使得开发者能够快速构建具备日历功能的应用。 uni-app日历组件基于Vue.js，支持H5、小程序（微信、支付宝、百度、QQ、...
uni-app的图标插件
01-14
导入到其它项目中使用方法 1. 将components/fa-icons/fa-icons.vue文件(夹)复制到自己的项目下 2.在main.js中全局引入 // 图表组件 import faicon from './components/fa-icon/fa-icon.vue' Vue.component('faicon',faicon) 3.页面中引用 在需要插入的页面引用 <!-- type 为图标名称 color 为图标颜色 默认#000000 (黑色，可不填) size 为图标大小 默认14px/1 (可不填) --> 或者class直接引用 <!-- 注意格式否则无法正常显示 class="fa fa-*" *号为名称 -->
在Uni-app中使用自定义图标
祈澈菇凉
10-18 862
使用矢量图标字体或图标库来添加自定义图标。一些常见的方法：1：使用矢量图标字体:矢量图标字体库，如Font Awesome、Material Icons等。将矢量图标字体文件（通常是.ttf或.otf格式）添加到项目中。需要使用图标的地方，使用相应的类名来渲染图标。</style>添加自定义字体文件。用相应的类名来渲染图标。
uniapp引入自定义图标
weixin_52102740的博客
07-24 1357
uniapp自定义图标
uniapp-x使用内置图标和iconfont图标
最新发布
我的小站：https://oby.ink
10-10 663
uniappx使用内置图标和iconfont图标
Uniapp——2. 引入自定义图标库
weixin_63215361的博客
06-23 489
把iconfont.css文件内容全选出来，在common目录下建一个新的文件夹，名称叫 icon.css,然后将全选的iconfont.css文件内容粘贴到 icon.css文件里，第二步：添加好了所需图标后在右上角的购物车中查看，已入库的图标，然后在所选图标添加项目，然后再将你添加的项目下载到本地，然后就会得到一个一下载好的图标压缩文件。第一步：打开阿里巴巴矢量图标库：https://www.iconfont.cn/，并登录自己的账号，第五步：使用图标，打开我们本地解压好的图标文件，
Uniapp在Vue环境中引入iconfont图标库（详细教程）
驴大毛的博客
11-01 1807
Uniapp在Vue环境中如何引入iconfont图标库的详细教程
uniapp uni-icons组件自定义图标
优快云博客专家，系统架构师，有合作、疑惑请私信博主。
09-02 3074
uniapp-uni-icons组件自定义图标，使用uni-icons增加自定义图标 1.1 准备图标 这里我使用的是阿里图标库,找到项目所需图标后,下载下来备用(可以是svg、ttf、img等等)
uni-app实现自定义导航栏并使用阿里小图标
weixin_42738839的博客
06-08 1216
首先下载阿里小图标，将选好的小图标添加入库，选择下载代码 将下载好的代码解压， 将iconfont.ttf文件拷到static文件夹下，打开iconfont.json找到对应的unicode 在main.json里面设置"navigationStyle": “custom”,对应的引入图标的text是在unicode前面加/u,比如“\ue503”,fontSrc为iconfont.ttf的路径，fontSize为图标大小，color为图标颜色 { "pages": [ //pages数组中第一项表.
uniapp常用图标.zip
01-15
图标 图标
uni-app引入自定义图标库——Iconfont-阿里巴巴
star_of_science的博客
09-02 3158
uni-app官方提供的图标库很少，今天来介绍一下如何引入自定义图标库，介绍如何使用阿里巴巴矢量图标库
uniapp引入阿里图标库
active_pig的博客
10-04 1794
平时项目开发肯定少不了图标的使用，除了自己定制图标库之外，再一个比较不错的就是使用阿里的图标库，这里包含了很多分类的图标，基本上你想用的图标它都有，不仅好看，使用起来也是非常方便的，下面一起来看看吧。你进入这个官网以后，挑选自己喜欢的图标后添加到自己的项目中，没有项目的随意建一个新的，新图标首先先加入购物车，然后到时候一块添加到项目中。这个就是图标的代码，每个不同的图标都不一样，这个可以自己尝试一下。官网地址：https://www.iconfont.cn/
uni-app图标库
Sun_Maple_jw的博客
09-07 9633
首先需要使用HBuilder X安装导入插件 官方文档路径：https://ext.dcloud.net.cn/plugin?id=28 <template> <view> <uni-icons type="cloud-upload"/> <uni-icons type="cloud-upload" color="#007aff" /> <uni-icons type="cloud-upload" color="#...
uniapp引入自定义图标库 --- 阿里巴巴矢量图标库iconfont
qq_29088015的博客
06-01 621
一、前言   引入字体库图标iconfont可以提高开发效率和项目的可维护性。阿里巴巴矢量图标库iconfont无疑是最佳的选择之一，今天就介绍下在uniapp中如何优雅的引入。 二、引用步骤 1. 注册登录 在官网注册登录 2. 创建项目 顶部操作栏的 资源管理 -> 我的项目 -> 新建项目 3. 搜索图标，添加入库 搜索图标，添加入库，选中的图标会在右上角的购物车图标上标识选中的个数 4. 选中图标添加进项目 点击右上角购物车图标，将选中图标添加进项目 5. 复制生
uni-app中使用自定义图标库
qq_43579525的博客
06-30 8495
方法一： 1.进入阿里图标库下载并解压字体图标库到本地(下载Unicode格式的) 2.在项目根目录下创建common目录，并把iconfont.css文件放入common目录中 3.修改iconont.css里的@font-face（保留base64字体图标） 3-1：未修改前是这样 @font-face {font-family: "iconfont"; src: url...
uni-app 图标库整合最佳实践：使用 iconfont 构建属于自己的图标库
前端梦工厂
11-06 4045
阿里巴巴矢量图标库是一种图标字体库，它将图标转换为字体的形式，并通过unicode编码进行引用。通过使用iconfont，开发者可以使用字体图标代替传统的图片图标，以提高网页加载速度和图标的灵活性。iconfont中的图标可以使用 CSS 进行样式控制，并且可以根据需要进行缩放、颜色调整等操作，非常方便。官方链接：iconfont - 阿里巴巴矢量图标库通过本篇文章，我们了解了在前端项目中使用 iconfont 自定义图标库的方法和步骤。
uni-app使用自定义导航
03-09
### 实现 uni-app 自定义导航栏 #### 页面配置 为了实现自定义导航栏，在 `pages.json` 文件中设置页面路径及其样式属性。具体来说，通过指定 `"navigationStyle": "custom"` 来隐藏默认顶部导航栏，并可以进一步定制文字颜色和其他视觉效果。 ```json { "path": "pages/index/index", "style": { "navigationStyle": "custom", // 设置为 custom 表示使用自定义导航栏 "navigationBarTextStyle": "white", // 导航栏标题字体颜色 "navigationBarTitleText": "首页" } } ``` #### 安装 UI 组件库 对于更复杂的界面需求，推荐安装官方提供的UI组件库来简化开发工作流[^1]： ```bash npm install @dcloudio/uni-ui --save ``` 这一步骤能够引入丰富的预构建组件资源，有助于快速搭建应用界面并保持一致性。 #### 编写自定义导航栏代码 创建一个新的 Vue 单文件组件用于表示自定义的导航条部分。此组件可以根据实际业务场景灵活调整布局结构与交互逻辑。例如，可以在模板里加入返回按钮、菜单图标等功能元素[^2]。 ```html <template> <view class="custom-nav-bar"> <!-- 返回箭头 --> <image v-if="showBackButton" src="/static/back.png" @click="handleBack"></image> <!-- 中间标题 --> <text>{{ title }}</text> <!-- 右侧操作项 --> <slot name="rightActions"></slot> </view> </template> <script> export default { props: ['title', 'showBackButton'], methods: { handleBack() { this.$router.back(); } } }; </script> <style scoped> .custom-nav-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; height: 44px; /* iOS标准高度 */ background-color: #fff; } /* 更多样式可根据设计稿自行补充 */ </style> ``` 上述代码片段展示了如何构建一个简单的自定义导航栏Vue组件，其中包含了基本的功能如显示标题以及处理点击事件等。 #### 使用自定义 TabBar 和特殊位置控件 如果项目中有多个页面需要统一管理底部标签页，则可以通过在项目的根目录下新建或编辑现有的 `App.vue` 文件来进行全局注册和初始化。当涉及到特殊的TabBar项（比如位于中央的大尺寸按钮），则需额外考虑其定位方式及响应行为的设计][^[^34]。 ```javascript // App.vue 或 main.js 中进行全局挂载 import MyCustomTabBar from '@/components/my-custom-tab-bar'; onLaunch(options){ ... if (this.$platform === 'mp-weixin') { // 判断平台环境 uni.setTabBarItem({ index: 2, // 假设第三个tab是特别的那个 text: '', iconPath: '/static/tabbar/home.png', selectedIconPath: '/static/tabbar/home-active.png' }); } ... }, ... ``` 以上介绍了关于uni-app框架下的几种常见方法去实现在不同层次上的自定义导航体验，包括但不限于顶部导航栏和底部标签栏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值