CSS3-字体图标的使用

约定不等于承诺〃 2023-07-13 12:22 24阅读 0赞

字体图标具有轻量、灵活、兼容性强的特点；比图片有较好的可编辑性，占用空间小、可复用性强，从而被广泛使用。

下面详细介绍一下字体图标的下载：

*  首先要到一些字体图标库网站去下载需要的字体图标，一般 [阿里巴巴矢量图标库][Link 1] 中都能找到自己需要的图标
 *  进入网站后进行登录，没有账号注册后再登录即可  
    ![在这里插入图片描述][20200312092840705.png]
 *  登录完成后在搜索栏中搜索自己需要的图标或直接在**图标库** 中查找  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]
 *  找到需要的图标后将其加入购物车  
    ![在这里插入图片描述][20200312093701405.gif]
 *  点击网页右上方的 **购物车** 即可查看或下载加入的字体图标  
    ![在这里插入图片描述][20200312094208269.png]
 *  选择 **下载代码** 将字体图标文件下载到本地  
    ![在这里插入图片描述][20200312094404184.png]

字体图标的使用：

*  解压之前下载好的压缩文件，复制其中的几个文件到自己的字体文件夹中  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]
 *  打开 `demo_index.html` 文件按照上面的步骤进行操作
    
    第一步：在需要使用字体图标的页面中引入字体文件，声明一种字体，修改文件路径
    
        <style> @font-face { /* font-family 定义字体的名称 */ font-family: 'myfont'; /* 引入相关文件，将路径改为自己的实际路径 */ src: url('./fonts/iconfont.eot'); src: url('./fonts/iconfont.eot?#iefix') format('embedded-opentype'), url('./fonts/iconfont.woff2') format('woff2'), url('./fonts/iconfont.woff') format('woff'), url('./fonts/iconfont.ttf') format('truetype'), url('./fonts/iconfont.svg#iconfont') format('svg'); } </style>
    
    第二步：设置需要使用字体图标的标签的 `font-family` 为自己定义的字体名称；或者直接定义一个类名，使用字体图标时先给元素添加个类名。
    
        h3, p { 
          font-family: 'myfont';
        }
        .iconfont { 
          font-family: 'myfont';
        }
    
    每个字体图标都有对应的编码（`demo_index.html` 文件可查看对应编码），将编码拷贝到标签中即可使用了  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]
    
        <h3></h3>
        <p></p>
        <h1 class="iconfont"></h1>
    
    效果：  
    ![在这里插入图片描述][20200312103213175.png]
 *  也可以使用 类+伪元素 的方式来使用字体图标，举个例子：
    
    比如想要使用 手机 图标，可以定义一个类选择器并为这个选择器添加伪元素；使用相关图标时直接给标签添加类名即可
    
        .phone::before { 
        	 /* content 中的内容为字体图标的编码，需要去掉前缀 &#x 和后面的分号 */
            content: '\e641';
            font-family: 'myfont'
          }
    
        <h1 class="phone"></h1>
    
    ![在这里插入图片描述][20200312105013924.png]
 *  也可以使用 `font class` 的方式来使用字体图标
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 3]
    
    首先将 `iconfont.css` 文件复制到项目文件夹中，然后在使用字体图标的文件中引入该文件；通过类名的方式来使用字体图标，需要注意的是使用字体图标的标签必须要添加一个前缀类名 `iconfont`
    
    主要代码示例：
    
        
        
        <link rel="stylesheet" href="./css/iconfont.css">
        
        
        <p class="iconfont icon-wode"></p>
    
    ![在这里插入图片描述][20200312112029789.png]

[Link 1]: https://www.iconfont.cn/
[20200312092840705.png]: https://img-blog.csdnimg.cn/20200312092840705.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200312093308649.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[20200312093701405.gif]: https://img-blog.csdnimg.cn/20200312093701405.gif
[20200312094208269.png]: https://img-blog.csdnimg.cn/20200312094208269.png
[20200312094404184.png]: https://img-blog.csdnimg.cn/20200312094404184.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200312101101187.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020031210312711.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[20200312103213175.png]: https://img-blog.csdnimg.cn/20200312103213175.png
[20200312105013924.png]: https://img-blog.csdnimg.cn/20200312105013924.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200312111556668.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[20200312112029789.png]: https://img-blog.csdnimg.cn/20200312112029789.png