| 1234567891011121314151617181920212223242526272829303132333435 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>图标字体</title>
- <link rel="stylesheet" href="./fa/css/all.css">
- </head>
- <body>
- <!--
- 图标字体（iconfont）
- -在网页中经常需要使用一些图标，可以通过图片来引入图标
- 但是图片大小本身比较大，并且非常的不灵活
- -所以在使用图标时，我们还可以将图标设置为字体，
- 然后通过font-face的形式来对字体进行引入
- -这样我们就可以通过使用字体的形式来使用图标
- fontawesome使用步骤
- 1、下载：https://fontawesome.com/
- 2、解压
- 3、将css和webfonts移动到项目中，并且这两个文件夹必须在同一个目录下
- 4、将all.css引入到网页中
- 5、使用图标字体
- -直接通过类名来使用图标字体
- class="fas fa-cat"
- class="fab fa-accessible-icon"
- -->
- <i class="fas fa-bell"></i>
- <i class="fas fa-bell-slash"></i>
- <i class="fas fa-cat" style="font-size: 40px; color: red;"></i>
- <i class="fab fa-accessible-icon"></i>
- </body>
- </html>
|
