uni-icons自定义图标详细步骤及踩坑经历

一、详细步骤

获取图标

1.访问iconfont-阿里巴巴矢量图标库,搜索图标并加入购物车:

2.点击页面右上角购物车图标 ,点击添加至项目,如没有项目,需要点击下图第二步的图标新建一个项目目录,如已经有项目则可以忽略第二步,选择项目后点击确定:

3.确定后进入项目,点击项目设置 ,对图标库进行一些设置:

4.项目名称和项目描述根据自己需求填写, fontClass 是图标的前缀 ,需要传入组件type属性,fontFamily 是图标集名称,需要传入组件custom-prefix 属性,字体格式可以只勾选 ttf:

5.点击保存后 ,可以下载到本地:

6.将 iconfont.ttf、iconfont.css 放到项目根目录 static 下。

7.打开 iconfont.css ,修改 @font-face 如下,注意 src 字体文件的引用路径是否正确:

css 复制代码
@font-face {
	font-family: "iconfont"; 
	src: url('/static/iconfont.ttf') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
}

.icon-search:before {
  content: "\e65c";
}

在 vue 页面使用自定义图标

在项目根目录的 App.vue 中,引入上述的 iconfont.css,注意自己存放的路径,且通过 @import 引入的外部样式,需要写在 style 标签有效内容中的最前面。

html 复制代码
<!-- App.vue -->
<style>
@import "@/static/iconfont.css";
</style>

使用 custom-prefix 和 type 属性自定义图标

html 复制代码
<uni-icons custom-prefix="iconfont" type="icon-search" size="30"></uni-icons>

二、踩坑经历

在线引入阿里巴巴矢量图标库

1.点击生成代码:

2.远程引用:

复制代码到本地要使用图标的vue文件中。

html 复制代码
<template>
	<view>
		<uni-icons fontFamily="iconfont" type="star" :size="30">{{'&#xe600;'}}</uni-icons>
	</view>
</template>
<script setup>

</script>
<style lang="scss" scoped>
	@font-face {
	  font-family: 'iconfont';  
	  src: url('https://at.alicdn.com/t/c/font_4690576_r6jvprb1guf.ttf?t=1727062386440') format('truetype');
	}
</style>

注意

1.复制地址没有https,注意要在url()内部加上https:

2.每一次新增图标,必须更新代码,并在自己代码中修改为更新后的url,否则新添加的图标无法使用。

相关推荐
gnip5 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel5 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休5 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪5 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do6 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选6 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选6 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼6 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
吴传逞6 小时前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
DT——6 小时前
前端登录鉴权详解
前端·javascript