uniapp笔记-项目中使用iconfont图标

操作逻辑

① 进入https://www.iconfont.cn然后下载到本地

② 把iconfont.css和iconfont.ttf文件拷贝到/static/icon/目录下。

例子

进入网站后,将选中的图标添加入库。

再进入购物车,添加至项目,

使用Font class然后下载至本地。

下载完后是一个download.zip的压缩包,最终将iconfont.ttf和iconfont.css拷贝到项目中。

在static下面,新建目录并把这2个文件放进去。

将原本的代码:

css 复制代码
@font-face {
  font-family: "iconfont"; /* Project id 4759232 */
  src: url('iconfont.woff2?t=1732537324569') format('woff2'),
       url('iconfont.woff?t=1732537324569') format('woff'),
       url('iconfont.ttf?t=1732537324569') format('truetype');
}

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

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

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

.icon-search1:before {
  content: "\e665";
}

修改为:

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

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

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

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

.icon-search1:before {
  content: "\e665";
}

在App.vue中导入刚刚的css。

javascript 复制代码
<style>
	/*每个页面公共css */
	@import url("~@/static/icon/iconfont.css");
</style>

测试使用,在pages/index/index.vue中使用如下代码:

javascript 复制代码
<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
			<text class="iconfont icon-cc-search"></text>
		</view>
	</view>
</template>

就有个搜索图标了。

相关推荐
##echo1 小时前
嵌入式Linux裸机开发笔记9(IMX6ULL)GPIO 中断实验(1)
linux·c语言·笔记·单片机·嵌入式硬件
我爱学嵌入式4 小时前
C语言第 9 天学习笔记:数组(二维数组与字符数组)
c语言·笔记·学习
_Kayo_11 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码12 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
源码_V_saaskw12 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
使二颗心免于哀伤14 小时前
《设计模式之禅》笔记摘录 - 10.装饰模式
笔记·设计模式
悠哉悠哉愿意14 小时前
【电赛学习笔记】MaxiCAM 项目实践——与单片机的串口通信
笔记·python·单片机·嵌入式硬件·学习·视觉检测
岩中竹15 小时前
广东省省考备考——常识:科技常识(持续更新)
笔记
Olrookie15 小时前
若依前后端分离版学习笔记(三)——表结构介绍
笔记·后端·mysql
rannn_11116 小时前
Java学习|黑马笔记|Day23】网络编程、反射、动态代理
java·笔记·后端·学习