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文件放置路径

@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设置不了样式,所以重写样式处理

<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代码如下

{
	"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、微信小程序效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/584383.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-8.1--C语言LED驱动程序

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

Q1季度阿胶电商数据分析:某黑马品牌线上销售增长超1800%

作为滋补养三大宝之一&#xff0c;阿胶具有补血滋阴、润燥止血、益智健脑、缓延衰老、强筋健骨、提高免疫力等多种功效和作用。同时阿胶被誉为“补血神器”、“美容养颜”等&#xff0c;使得其备受市场欢迎。 根据鲸参谋数据显示&#xff0c;今年Q1季度&#xff0c;在综合电商…

【WEB前端2024】开源智体世界:乔布斯3D纪念馆-第15课-xcard方式跳转平行3D馆

【WEB前端2024】开源智体世界&#xff1a;乔布斯3D纪念馆-第15课-xcard方式跳转平行3D馆 使用dtns.network德塔世界&#xff08;开源的智体世界引擎&#xff09;&#xff0c;策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智…

记录一次大数据量接口优化过程

问题描述 记录一次大数据量接口优化过程。最近在优化一个大数据量的接口&#xff0c;是提供给安卓端APP调用的&#xff0c;因为安卓端没做分批次获取&#xff0c;接口的数据量也比较大&#xff0c;因为加载速度超过一两分钟&#xff0c;所以导致接口超时的异常&#xff0c;要让…

【C++干货基地】探索C++模板的魅力:如何构建高性能、灵活且通用的代码库(文末送书)

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引入 哈喽各位铁汁们好啊&#xff0c;我是博主鸽芷咕《C干货基地》是由我的襄阳家乡零食基地有感而发&#xff0c;不知道各位的…

天空卫士旗舰产品入选《网络安全专用产品指南》

权威认证 近日&#xff0c;中国网络安全产业联盟&#xff08;CCIA&#xff09;发布了第一版《网络安全专用产品指南》。这一权威指南中&#xff0c;天空卫士荣获殊荣&#xff0c;旗下三款尖端产品荣耀入选&#xff0c;分别是增强型Web安全网关&#xff08;ASWG&#xff09;、数…

广交会烹饪机器人用上大模型 支付宝小程序云提供技术支持

近日&#xff0c;第135届广交会正在火热进行&#xff0c;记者获悉&#xff0c;支付宝小程序云助力合作伙伴田螺云厨&#xff0c;在烹饪机器人上开始用上大模型技术。各类智能产品的亮相&#xff0c;从中国制造迈向中国创造&#xff0c;也成为广交会的一个亮点。 &#xff08;图…

ipad的文件如何传到手机里 iPad较大文件怎么发送出去 iMazing下载教程

在现代生活中&#xff0c;随着移动设备的普及和多样化&#xff0c;我们经常需要在不同设备之间传输文件&#xff0c;以便在工作、学习或娱乐中更加便捷地使用这些文件。iPad和iPhone是用户广泛使用的设备&#xff0c;我们时常使用它们来存储和访问大量的个人数据。但有时&#…

人脸识别开源算法库和开源数据库

目录 1. 人脸识别开源算法库 1.1 OpenCV人脸识别模块 1.2 Dlib人脸识别模块 1.3 SeetaFace6 1.4 DeepFace 1.5 InsightFace 2. 人脸识别开源数据库 2.1 CelebA 2.2 LFW 2.3 MegaFace 2.4 Glint360K 2.5 WebFace260M 人脸识别 (Face Recognition) 是一种基于人的面部…

C#命名空间常用函数

在C#中&#xff0c;不同命名空间下有各种常用函数&#xff0c;下面列举一些常见的函数及其对应的命名空间&#xff1a; System命名空间&#xff1a; Console.WriteLine()&#xff1a;用于向控制台输出信息。Convert.ToInt32()&#xff1a;用于将其他数据类型转换为整数类型。 S…

python与上位机开发day04

模块和包、异常、PyQt5 一、模块和包 1.1 模块 Python中模块就是一个.py文件&#xff0c;模块中可以定义函数&#xff0c;变量&#xff0c;类。模块可以被其他模块引用 1.1.1 导入模块 """ 导入格式1&#xff1a; import 模块名 使用格式&#xff1a; …

【百度Apollo】探索自动驾驶:Apollo 新版本 Beta 全新的Dreamview+,便捷灵活更丰富

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《linux深造日志》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引入一、Dreamview介绍二、Dreamview 新特性2.1、基于模式的多场景——流程更简洁地图视角调节&#xff1a;调试流…

JavaEE技术之MySql高级(索引、索引优化、sql实战、View视图、Mysql日志和锁、多版本并发控制)

文章目录 1. MySQL简介2. MySQL安装2.1 MySQL8新特性2.2 安装MySQL2.2.1 在docker中创建并启动MySQL容器&#xff1a;2.2.2 修改mysql密码2.2.3 重启mysql容器2.2.4 常见问题解决 2.3 字符集问题2.4 远程访问MySQL(用户与权限管理)2.4.0 远程连接问题1、防火墙2、账号不支持远程…

Python中的类(Class)详解——新手指南

在Python编程中&#xff0c;类&#xff08;Class&#xff09;是一个非常重要的概念&#xff0c;它允许程序员创建自己的对象类型。这些对象类型可以包含数据&#xff08;称为属性&#xff09;和函数&#xff08;称为方法&#xff09;&#xff0c;它们定义了这些对象的行为。本文…

Spring-Mybatis-Xml管理(动态sql语句,sql语句复用)

目录 前置条件 动态SQL语句 动态删除数据 1.集合类型:数组 2.集合类型: List 型 SQL语句重用 说明 &#x1f9e8;前置条件 已经创建了实体类(这边举个例子) 实体类User表 表中的字段名User实体类的属性值id (bigint auto increment) 长整型 自动增长private Long iduser…

场景文本检测识别学习 day06(Vi-Transformer论文精读)

Vi-Transformer论文精读 在NLP领域&#xff0c;基于注意力的Transformer模型使用的非常广泛&#xff0c;但是在计算机视觉领域&#xff0c;注意力更多是和CNN一起使用&#xff0c;或者是单纯将CNN的卷积替换成注意力&#xff0c;但是整体的CNN 架构没有发生改变VIT说明&#x…

C++入门第二节

点赞关注不迷路&#xff01;&#xff0c;本节涉及c入门关键字、命名空间、输入输出... 1. C关键字 C总计63个关键字&#xff0c;C语言32个关键字 asmdoifreturntrycontinueautodoubleinlineshorttypedefforbooldynamic_castintsignedtypeidpublicbreakelselongsizeoftypenam…

LeetCode-hot100题解—Day5

原题链接&#xff1a;力扣热题-HOT100 我把刷题的顺序调整了一下&#xff0c;所以可以根据题号进行参考&#xff0c;题号和力扣上时对应的&#xff0c;那么接下来就开始刷题之旅吧~ 1-8题见LeetCode-hot100题解—Day1 9-16题见LeetCode-hot100题解—Day2 17-24题见LeetCode-hot…

V23 中的新增功能:LEADTOOLS React Medical Web 查看器

LEADTOOLS (Lead Technology)由Moe Daher and Rich Little创建于1990年&#xff0c;其总部设在北卡罗来纳州夏洛特。LEAD的建立是为了使Daher先生在数码图象与压缩技术领域的发明面向市场。在过去超过30年的发展历程中&#xff0c;LEAD以其在全世界主要国家中占有的市场领导地位…

21.Nacos集群搭建

模拟Nacos三个节点&#xff0c;同一个ip,启动三个不同的端口&#xff1a; 节点 nacos1, 端口&#xff1a;8845 节点 nacos2, 端口&#xff1a;8846 节点 nacos3, 端口&#xff1a;8847 1.搭建数据库&#xff0c;初始化数据库表结构 这里我们以单点的数据库为例 首先新建一…