CSS高级技巧之字体图标的使用

最新推荐文章于 2022-11-11 21:50:09 发布

Draco-_-

最新推荐文章于 2022-11-11 21:50:09 发布

阅读量515

点赞数

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

本文链接：https://blog.csdn.net/weixin_44392084/article/details/107844599

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、推荐字体图标的网址

1、https://icomoon.io/ 一个国外的网站，打开的话会有点慢
2、https://www.iconfont.cn/ 阿里巴巴网站，关键是免费的
这两个网址都可以下载字体图标

二、下载字体图标

以icomoon为例

打开之后是这样

在这里插入图片描述

之后就可以看见各种各样的图标了，选择你想要的

在这里插入图片描述

如果划到最后，没有你想要的，可以点击下面的add icons from library进行添加

在这里插入图片描述

添加你想要的

在这里插入图片描述

选择完之后，选择生成字体图标

在这里插入图片描述

下载得到zip

在这里插入图片描述

解压后文件列表如下

在这里插入图片描述

至此下载字体图标完成！！！

三、使用字体图标

1、文件列表下的fonts文件夹，复制到页面的同级目录下

在这里插入图片描述

2、用记事本打开style.css文件

在这里插入图片描述

3、复制选中部分

在这里插入图片描述

4、打开文件列表下的demo.html，界面如下，复制你想使用的图标后面的小方框，放入到标签中

在这里插入图片描述

5、给span一个font-family: ‘icomoon’;

注意：font-family里面的icomoon要与复制代码的第二行一样即可

在这里插入图片描述

最后打开界面，即可成功！！也可以对字体图标进行修改样式

在这里插入图片描述

四、代码总结

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标的使用</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?fgdf6x');
            src: url('fonts/icomoon.eot?fgdf6x#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?fgdf6x') format('truetype'),
                url('fonts/icomoon.woff?fgdf6x') format('woff'),
                url('fonts/icomoon.svg?fgdf6x#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        span {
            font-family: 'icomoon';
            font-size: 50px;
            color: pink;
        }
    </style>
</head>

<body>
    <span></span>
    <span></span>
</body>

</html>

注意：解压后的文件，不要删掉，后面进行添加新的字体图标还会用到！！！！

Draco-_-

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS高级技巧之字体图标的使用

目录一、推荐字体图标的网址二、下载字体图标以icomoon为例打开之后是这样之后就可以看见各种各样的图标了，选择你想要的如果划到最后，没有你想要的，可以点击下面的add icons from library进行添加添加你想要的选择完之后，选择生成字体图标下载得到zip解压后文件列表如下至此下载字体图标完成！！！三、使用字体图标1、文件列表下的fonts文件夹，复制到页面的同级目录下2、用记事本打开style.css文件3、复制选中部分4、打开文件列表下的demo.html，界面如下，复制你想使用的图标后面的
复制链接

扫一扫

专栏目录