uniapp关于iconfont字体图标使用

1、打开[阿里巴巴矢量图标库](https://www.iconfont.cn/),选择需要的图标添加到购物车

2、点开购物车,将图标添加到项目

3、点开项目,点击下载至本地,会得到一个download.zip包

4、解压download包

5、将包里的iconfont.css和iconfont.ttf文件分别放在以下目录,并在App.vue里引入iconfont.css

6、iconfont.css代码,注意src只保留.ttf后缀名代码,路径设置为iconfont.ttf文件放置路径

css 复制代码
@font-face {
	font-family: "iconfont";
	/* Project id 4529577 */
	src: 
		url('@/static/fonts/iconfont.ttf?t=1714373629688') format('truetype');
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

7、使用代码,主要是引用iconfont icon-search样式,注意u-search的placeholder设置不了样式,所以重写样式处理

html 复制代码
<template>
	<view>
		<!--这里主要是给u-search标签的placeholder添加字体图标,因为placeholder不能设置样式进去,
		所以在本类重写它原有的样式.u-search__content__input--placeholder达到效果,\ue614是图标的unicode编码,
        由\u加上.icon-search:before里的content的字符组成-->
		<u-search v-model="queryParams.title" :clearabled="true" :showAction="false" margin="10px 10px 0px 10px"
			bgColor="#e7e6e4" searchIconColor="black" searchIconSize="14px" :label="location.address"
			:placeholder="'\ue614 请输入关键词'" searchIcon="arrow-down" inputAlign="center" @search="onSearch" @clear="getList">
		</u-search>

		<!--u--input标签的placeholder能设置样式,所以通过placeholderClass设置字体图标-->
		<view style="margin: 10px 10px 10px;">
			<u--input type="text" placeholderClass="iconfont icon-search" placeholder="搜索..." />
		</view>

		<!--给文字添加字体图标,使用class直接指定样式-->
		<view style="margin: 10px 10px 10px;">
			<span class="iconfont icon-search">111</span>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryParams: {
					title: ""
				},
                location: {
					address: "城市"
				}
			}
		},

		methods: {
			getList() {

			},
			onSearch() {

			}
		}
	};
</script>

<style>
	page {
		height: 100%;
		background: white;
	}

	.u-search__content__input--placeholder {
		font-family: iconfont;
	}
</style>

8、效果图

9、tabbar使用iconfont字体图标(微信小程序不支持),page.json代码如下

bash 复制代码
{
	"tabBar": {
		"borderStyle": "white",
		"backgroundColor": "white",
		//选中前文字颜色
		"color": "#3c9cff",
		//选中后文字颜色
		"selectedColor": "#3c9cff",
		//字体图标文件路径
		"iconfontSrc": "static/fonts/iconfont.ttf",
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/tourism-tabbar/home/index",
				"iconfont": {
					//选中前字体图标
					"text": "\ue614",
					//选中后字体图标
					"selectedText":"\ue614",
					//图标大小
					"fontSize": "16px",
					//选中前图标颜色
					"color": "#3c9cff",
					//选中后图标颜色
					"selectedColor": "#3c9cff"
				}
			}
		]
	}
}

10、微信小程序效果图

相关推荐
yinuo8 分钟前
UniApp+Vue3多分包引入同一 npm 库被重复打包至 vendor 的问题分析与解决
前端
码界奇点19 分钟前
Spring Web MVC构建现代Java Web应用的基石
java·前端·spring·设计规范
yinuo38 分钟前
UniApp + Vue3 使用 marked 报错:SyntaxError /[\p{L}\p{N}]/u 问题分析与解决
前端
大前端helloworld1 小时前
前端梳理体系从常问问题去完善-框架篇(Vue2&Vue3)
前端·javascript·面试
小墨宝1 小时前
web前端学习LangGraph
前端·学习
南囝coding1 小时前
React 19.2 重磅更新!这几个新特性终于来了
前端·react.js·preact
Dajiaonew1 小时前
Vue3 + TypeScript 一篇文章 后端变全栈
前端·javascript·typescript
广州华水科技2 小时前
GNSS与单北斗变形监测一体机在基础设施安全中的应用分析
前端
勤劳打代码2 小时前
妙笔生花 —— Flutter 实现飞入动画
前端·flutter·设计模式
银安3 小时前
CSS排版布局篇(4):浮动(float)、定位(position) 、层叠(Stacking)
前端·css