目录
1.打开官网https://www.iconfont.cn/并登录(微博账号,阿里城账号,GitHub账号)。
2. 通过搜索框搜索需要的字体图标(鼠标放置)选择“添加入库”(或增加至购物车)。 购物车-右上方小车
1.打开官网https://www.iconfont.cn/并登录(微博账号,阿里城账号,GitHub账号)。
2. 通过搜索框搜索需要的字体图标(鼠标放置)选择“添加入库”(或增加至购物车)。 购物车-右上方小车
3.点击购物车添加至项目
方式一:本地使用:先下载然后导入iconfont.css
方式二:使用在线版:生成css代码,复制url路径,在url路径前添加http: ;注意:需要联网
4.在标签元素内使用固定格式添加字体图标:
例如:<i class="iconfont icon-XXX"></i>
注意:icon-XXX是某个字体图标的名字(可通过font文件夹中的html查看字体图标名,也可以直接复制代码)。
5.代码事例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<!-- 方式一:本地使用:先下载然后导入iconfont.css -->
<!-- <link rel="stylesheet" href="./iconfont/iconfont.css"> -->
<!-- 方式二:使用在线版:生成css代码,复制url路径,在url路径前添加http: ;注意:需要联网 -->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2896438_x0b8somulv.css">
<style>
</style>
</head>
<body>
<span class="iconfont icon-caidan"></span>
<span class="iconfont icon-sousuo"></span>
<span class="iconfont icon-wodeshujia"></span>
</body>
</html>
期望看完的朋友可以点个赞,谢谢。