当前位置：首页 > article >正文

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

article 2025/3/5 0:25:04

操作逻辑

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

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

例子

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

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

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

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

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

将原本的代码：

@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";
}

修改为：

@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。

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

测试使用，在pages/index/index.vue中使用如下代码：

<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>

就有个搜索图标了。