字体图标的引入方式

爱凑热闹828

已于 2022-10-06 10:55:02 修改

阅读量288

点赞数 2

分类专栏： web前端文章标签： html5 css

于 2022-10-04 22:17:58 首次发布

本文链接：https://blog.csdn.net/weixin_65692463/article/details/127167214

版权

web前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

使用字体图标（重点）

引入相关文件（前提）

1.引入 css

<link rel="stylesheet" href="./fonts/iconfont.css">

使用类名引入字体图标

如果是一个标签来使用字体文件，一般都用i标签，可以采取2个类名的形式。（最常用）

<i class="iconfont icon-daohangdizhi"></i>

第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。不是普通的文字。
第二个类名 icon-daohangdizhi，告诉盒子到底使用哪个小图标。

使用unicode编码(了解)
也可以直接在标签内部放入一个编码

例子：
```
 <strong> &#xe8ab; </strong>  
```
css 要指定当前标签的文字是字体图标，必须要声明。使用伪元素字体图标

<div class="car1">购物车</div>

线下引入方式

 <link rel="stylesheet" href="http://at.alicdn.com/t/font_3234864_h0da2uig6lr.css">

常见错误

 <!-- bug1 注意不要引入错css了 -->
    <!-- <link rel="stylesheet" href="./fonts/demo.css"> -->
    <link rel="stylesheet" href="./fonts/iconfont.css">
</head>
<!-- bug:请你找到下面2出错误,让字体图标显示出来 -->

<body>
    <!-- bug2 写在标签里的类名不能加 . -->
    <!-- <i class="iconfont .icon-gouwuchekong"></i> -->
    <i class="iconfont icon-gouwuchekong"></i>
</body>