uniapp引入自定义图标

已于 2024-07-26 22:27:36 修改
阅读量1.2k 收藏 8
点赞数 11
分类专栏： uniapp 文章标签： uni-app
于 2024-07-24 22:09:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_52102740/article/details/140674503
版权
最低0.47元/天 解锁文章
uniapp 自定义图标icon
m0_46554818的博客
08-06 1万+
uniapp 自定义图标 超级简单准备工作： 例如上边的图标，我们发现都是蓝白切换，这时候用img整个项目就太大了，占内存，这是我们可以把他做成uniapp内置的icon图标。 准备工作： 1.先把图片以svg格式导入阿里图标库（用ps把png格式图片转化成svg格式没用，这一步可以让设计直接上传阿里图标库，提前把png图片命名好发给设计部） 类似这种 （其实白色的精灵图可以不用命名） 2.去uniapp插件市场下载 iconfont 插件（iconfont插件） 下载好放入文件的组件部分，如下图：
uni-app引入自定义图标库
weixin_44433499的博客
07-21 1016
1.进入阿里图标库下载并解压字体图标库到本地(下载Unicode格式的) 方法一： 2.在项目根目录下创建common目录，并把iconfont.css文件放入common目录中 3.修改iconont.css里的@font-face（保留base64字体图标） 删除划线部分，保留结尾分号。 删除后： @font-face {font-family: "iconfont"; src:url('data:application/x-font-woff2;charset=utf-8;base64,d09
uniapp自定义tabbar图标样式
10-13
uniapp自定义tabbar图标样式uniapp自定义tabbar图标样式
uniapp 添加自定义图标
朝阳39的博客
12-28 1458
/启动项目，效果如下。
uniapp开发使用uni-icons添加自定义图标
m0_71835253的博客
04-15 749
记得去点击编辑看下Unicode(16进制)码(红色箭头可以看到)是否与你原本项目的uni-icons组件的uniicons.css文件中的 content 代码有重复，如果有请更改至无重复的。选择字体文件导入，将刚才的 uniicons.ttf 文件导入进去，就会出现uni-icons原本的图标。6.打开uniicons.css 将刚刚字体图标引入就可以了，content代码在里面看。需求：使用uni-icons自定义图标,但是用不了uni-icons，需要单独引入。
open cv提取图片特征值_基于VGG16网络提取Flicker8K数据集图像特征
weixin_39612726的博客
11-28 450
# !/usr/bin/env python3# -*- coding: utf-8 -*-# @Time : ${20200326} ${18:00}# @Author : ZicoZhou# @Version :1.0# @Function : VGG16网络提取图像特征from keras.models import model_from_jsonfrom keras.models impo...
uni-app 自定义图标
weixin_49295874的博客
07-15 1887
https://blog.youkuaiyun.com/IT_iosers/article/details/113278091 1、在page.json里的配置项 主要注意：fontSrc：图标类型为ttf text为图标的unicode编码 float决定了图标时的位置 { "path": "pages/my/index", "style": { "app-plus": { "titleNView": { "buttons": [{
uniapp如何使用自定义的图标
Heby的博客
05-24 698
原文链接：https://blog.youkuaiyun.com/karlaofsky/article/details/136970579。1.在官方（iconfont-阿里巴巴矢量图标库）选择自己想要的图标，加入购物车。1、在iconfont.json中找到相对应的font-class。4.将文件夹（iconfont）整个放到项目中的static中。6.在App.vue中全局引入 iconfont.css文件。5.修改iconfont.css文件。一定要添加类名 ：iconfont。3.解压文件夹 并更改名字。
uniapp字体图标的使用
12-31
在uniapp中，我们可以借助第三方字体库如Ionicons、FontAwesome或者自定义的字体库来引入这些图标。 二、引入字体图标库 1. 安装字体库：首先，你需要选择一个字体图标库，例如Ionicons，通过npm命令行工具进行安装...
UniApp开发鸿蒙应用中实现自定义导航栏的详细教程
最新发布
2401_82505179的博客
05-14 850
本文详细介绍了在UniApp开发鸿蒙应用时如何实现自定义导航栏的步骤和技巧。首先，通过全局或局部配置隐藏默认导航栏，然后创建自定义导航栏组件，并在页面中注册和使用该组件。文章还特别强调了适配鸿蒙平台的注意事项，如状态栏高度适配和导航栏高度计算。此外，教程还提供了高级功能扩展，如动态修改导航栏样式和夜间模式切换，并附有完整的示例代码。
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-*" *号为名称 -->
uniapp 使用自定义icon图标
黎小小的博客
05-29 6164
注意如果时vue3需要 slot用在节点中。
uni-app项目引入图标
weixin_42373488的博客
01-29 1311
uni-app项目引入图标 普通图标引入 1、阿里巴巴矢量图官网创建图标项目 2、将搜索的图标添加进购物车，在购物车里面将图标添加进项目里面 3、下载该文件到本地，将该文件的css文件复制到项目里面 （并设置大小） 4、修改iconfont.css文件的引入文件，只留下data路径，并用分号结尾 5、项目页面使用icon <view class="icon iconfont 图库的图标名"></view> 彩色图标引入 1、同样创建彩色图标项目，在阿里巴巴矢量图
uni-app中使用自定义图标库
qq_43579525的博客
06-30 8274
方法一： 1.进入阿里图标库下载并解压字体图标库到本地(下载Unicode格式的) 2.在项目根目录下创建common目录，并把iconfont.css文件放入common目录中 3.修改iconont.css里的@font-face（保留base64字体图标） 3-1：未修改前是这样 @font-face {font-family: "iconfont"; src: url...
在uniapp中如何自定义一个图标
2301_79420857的博客
12-27 805
然后还有就是图标它可能会变成一个方块，我在项目中遇到过这个问题，于是我把标签内带有custom-prefix="custom-icon"的这个属性给删掉了，它也就恢复到原本的样式了。不知道什么原因但是这也算是一个解决办法。在我的自定义图标中type是icon-xiaolian文件的css是这个样子，我上面下载过来的是其他的图标文件，只不过里面有直接引入的路径地址，给大家演示步骤的时候比较典型。已经收录了日常开发中常用的图标 ，但是因为体积问题 ，不可能一直无限添加新图标 ，所以。也提供了扩展的方法。
uniapp中引入自定义图标
qq_44242030的博客
05-07 1568
如何在uniapp中使用icon 1.在iconfont官网找你想要的图标 2.在你的uniapp项目中粘贴这段代码，粘贴在app.vue文件的style标签内 注意：粘贴过来需要加https 3.在App.vue的style标签内增加需要使用的图标引用 content 控制来源： ...
uniapp引入iconfont图标本地
02-18
### 正确引入和使用本地 IconFont 图标 #### 在 `App.vue` 文件中引入 CSS 文件 为了确保整个项目都能访问到 IconFont 的样式，在项目的入口文件 `App.vue` 中全局引入 `iconfont.css` 是一种常见做法。具体实现如下： ```html <style> @import "@/static/font/iconfont.css"; </style> ``` 此方法能够使定义好的图标类名在整个应用内生效，方便后续页面调用[^2]。 #### 修改 `iconfont.css` 路径配置 由于 UniApp 采用的是基于 Vue.js 的单页应用程序架构，因此对于资源路径解析有特定的要求。需调整 `iconfont.css` 内部的字体文件链接为相对于静态资源目录 (`/static`) 下的确切位置。例如： ```css @font-face { font-family: "iconfont"; /* Project id */ src: url('/static/fonts/iconfont.woff2') format('woff2'), url('/static/fonts/iconfont.woff') format('woff'), url('/static/fonts/iconfont.ttf') format('truetype'); } ``` 上述设置保证了不同平台环境下均能正常加载所需字体文件[^4]。 #### 使用 IconFont 字体 完成以上两步之后便可以在模板里通过指定相应 HTML 标签来展示想要使用的图标。通常会借助 `<text>` 或者其他支持自定义样式的标签配合对应的 class 来呈现效果: ```html <template> <view> <!-- 这里的 'icon-a-21-xiugai' 需替换为你实际拥有的图标名称 --> <text class="iconfont icon-a-21-xiugai"></text> </view> </template> <script setup lang="ts"> // 组件逻辑... </script> <style scoped> .iconfont { font-family:"iconfont" !important; speak:none; display:inline-block; text-align:center; width:1em;height:1em;line-height:1; vertical-align:-0.15em;font-size:16px; } /* 添加更多个性化样式 */ .icon-a-21-xiugai:before{ content:'\e600'; /* 替换成对应图标的 Unicode 编码 */ } </style> ``` 这段代码展示了如何在一个组件内部声明并渲染一个来自 IconFont 库的具体图标实例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值