图标字体 – 开源达人博客

1 https://www.iconfont.cn/ 加购物车，下载代码。

2 web目录新建 /css/ /fonts/

iconfont.css 放入 /css/

iconfont.ttf 放入 /fonts/

html 加入css

修改这个css 中的 url文件。

@font-face {
font-family: “iconfont”; /* Project id */
src: url(‘iconfont.ttf?t=1697361063969’) format(‘truetype’);
}

字体改为如下：

@font-face {
font-family: “iconfont”; /* Project id */
src: url(‘../fonts/iconfont.ttf?t=1697361063969’) format(‘truetype’);
}

3

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="css/iconfont.css">
</head>
<body>
	<header class="head">
       header 
    </header>
	<div class="main">
		<div class="main-l">left</div>
		<div class="main-r">right</div>
	</div>
	<footer class="foot">
		<ul>
			<li>
				<a href="#"></a>
				<i class="iconfont icon-cangchucangku"></i>
				<span>首页</span>
			</li>
			<li>
				<a href="#"></a>
				<i class="iconfont icon-dingdan"></i>
				<span>消息</span>
			</li>
			<li>
				<a href="#"></a>
				<i class="iconfont icon-user"></i>
				<span>我的</span>
			</li>
		</ul>
	</footer>
</body>
</html>

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('../fonts/iconfont.ttf?t=1697361063969') format('truetype');
}

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

.icon-cangchucangku:before {
  content: "\e98c";
}

.icon-dingdan:before {
  content: "\e98d";
}

.icon-user:before {
  content: "\e99e";
}

移动基础

我们要如何帮助您？