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>

就有个搜索图标了。

相关推荐
耶啵奶膘1 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
IMPYLH2 小时前
Python 的内置函数 reversed
笔记·python
ysa0510305 小时前
数论基础知识和模板
数据结构·c++·笔记·算法
今天背单词了吗9806 小时前
算法学习笔记:7.Dijkstra 算法——从原理到实战,涵盖 LeetCode 与考研 408 例题
java·开发语言·数据结构·笔记·算法
mitt_6 小时前
《人生顶层设计》读书笔记7
笔记
智者知已应修善业6 小时前
【51单片机节日彩灯控制器设计】2022-6-11
c语言·经验分享·笔记·单片机·嵌入式硬件·51单片机
Jyywww1216 小时前
微信小程序学习笔记
笔记·学习·微信小程序
m0_678693337 小时前
深度学习笔记29-RNN实现阿尔茨海默病诊断(Pytorch)
笔记·rnn·深度学习
sigmoidAndRELU8 小时前
读Vista
笔记·stable diffusion·世界模型
Sincerelyplz8 小时前
【Temproal】快速了解Temproal的核心概念以及使用
笔记·后端·开源