字体图标的下载及使用

最新推荐文章于 2024-07-01 11:31:42 发布

sunshine-smile_lr

最新推荐文章于 2024-07-01 11:31:42 发布

阅读量1k

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/qq_46034942/article/details/122855678

版权

1字体图标的下载

1.使用前提：简单的、颜色单一的图片（复杂的或颜色多样的建议使用精灵图）

2.本质：展示的是图片，本质是字体

3.优势：可修改尺寸、大小、兼容性

1.1iconfont（阿里图标库）https://www.iconfont.cn/（常用）

步骤：登录—>图标库—>找图标（选择不同的渠道找到自己所需的图标）—>加入购物车（点击图标上的购物车）—>点击“购物车”—>选择“添加至项目”（若没有项目新建一个项目）—>点击“下载至本地”（下载的为.zip，使用时需进行解压）

1.2icomoon(外网) https://www.iconmoon.io/

2字体图标的使用

2.1引入

2.1.1将下载的.zip文件进行解压，并将以下所示文件复制到项目中的fonts（用户自己建的）文件夹中

2.1.2调用（通过link调用iconfont.css文件，注意路径）

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

2.2使用（3种方法）

解压的.zip中有自动生成的“demo_index.html”文件，双击打开，可以看到自动生成的“Unicode"字符编码和”Font class"类名，在使用时，直接拿来用即可。

2.2.1方法一：使用类名调用（必须调用两个类名）

iconfont：基本样式，包含字体的使用

icon-xxx：图标对应的类名（在demo_index.html中的Font class中）

*注：设置字体图标样式，不能直接给标签设置，考虑到优先级问题，应该最好添加给icon-xxx，必须调用两个类名

<!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>Document</title>
     <link rel="stylesheet" href="./fonts/iconfont.css">
     <style>
         /* 设置字体图标样式 */
         .icon-icon-test1 {
             font-size: 50px;
             color: red;
         }
     </style>
 </head>
 <body>
     <!-- 利用类名调用字体图标，在demo_index.html中的Font class中，复制所要使用的图标类名 -->
     <div class="iconfont icon-icon-test1"></div>
 </body>
 </html>

2.2.2方法二：使用编码调用

*注：必须调用类名iconfont，在标签中粘贴从Unicode复制过来的图标对应编码，封号不要忘记

<!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>Document</title>
     <link rel="stylesheet" href="./fonts/iconfont.css">
     <style>
         /* 设置字体图标样式 */
         .iconfont {
             font-size: 50px;
             color: red;
         }
     </style>
 </head>
 <body>
     <!-- 利用编码调用字体图标 -->
     <div class="iconfont">&#xe63b;</div>
 </body>
 </html>

2.2.3方法三：使用伪元素调用

*注：利用伪元素使用字体图标时，将图标的编码复制到content中，前面要加"\",且一定要写字体系列（font-family: 'iconfont'来声明字体)

 <!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>Document</title>
     <link rel="stylesheet" href="./fonts/iconfont.css">
     <style>
         /* 设置字体图标样式 */
         div::after {
             content: '\e63b';
             font-family: 'iconfont';
             font-size: 50px;
             color: red;
         }
     </style>
 </head>
 <body>
     <!-- 设置伪元素调用字体图标 -->
     <div></div>
 </body>
 </html>