iconfont字体图标的初级使用攻略

目录

1.打开官网https://www.iconfont.cn/并登录(微博账号,阿里城账号,GitHub账号)。

2. 通过搜索框搜索需要的字体图标(鼠标放置)选择“添加入库”(或增加至购物车)。 购物车-右上方小车

 3.点击购物车添加至项目 

 4.在标签元素内使用固定格式添加字体图标:

5.代码事例:


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>

期望看完的朋友可以点个赞,谢谢。

猜你喜欢

转载自blog.csdn.net/weixin_51081257/article/details/121281382