从前端小白到大佬字体图标

最新推荐文章于 2024-09-11 10:49:17 发布

一只琳娜

最新推荐文章于 2024-09-11 10:49:17 发布

阅读量144

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/my_prince/article/details/108597239

版权

CSS 字体图标

主要用于显示网页中通用、常用的一些小图标，也叫iconfont，看起来像图片但本质上属于字体。
可以很方便的更改大小，改变颜色，不失真；
只需要向服务器请求一次，直接加载，速度更快；
兼容性较高，基本支持所有浏览器。
在这里插入图片描述

字体图标的下载
推荐下载网址：
icomoon字库 http://icomoon.io
阿里 iconfont 字库 http://www.iconfont.cn/

举例子icomoon字库下载和使用

在这里插入图片描述
开始挑选

下方会显示已经选择的icon个数，选好后点击右下角就可以下载了。

选中左上方的编辑按钮，后点击图标可以实现对图标的编辑

网页拉到底端，点击这个链接，会打开其他的icon

可以选择其他风格的图标，但要不要钱就是另一个问题了。在这里插入图片描述

选完了，编辑完了，我们点击右下角的下载在这里插入图片描述
就会得到一个包

接下来就是字体图标的使用
我们将fonts文件复制到使用到图标的html文件的根目录中

接下来在css中引用字体文件，代码就在下载的style.css中复制。

<!doctype html>
<html>

<head>
    <meta charset='UTF-8' />
    <title>damoe</title>
    <style type="text/css">
    /* 字体图标 */
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?6slgri');
            src: url('fonts/icomoon.eot?6slgri#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?6slgri') format('truetype'), url('fonts/icomoon.woff?6slgri') format('woff'), url('fonts/icomoon.svg?6slgri#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        
        .box {
           
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

然后打开下载的demo.html文件，看到的就是我们下载好的图表样式，
在这里插入图片描述
选中图标右下角的小框框，复制一份，把他粘贴到我们的div中，

<div class="box"></div>

这时候我们打开页面看到的还是一个小框框，接下来必须在div内的声明字体类型，才能够看到我们想要的iconfonts，得到最终代码：

<!doctype html>
<html>

<head>
    <meta charset='UTF-8' />
    <title>damoe</title>
    <style type="text/css">
        /* 字体图标 */
        
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?6slgri');
            src: url('fonts/icomoon.eot?6slgri#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?6slgri') format('truetype'), url('fonts/icomoon.woff?6slgri') format('woff'), url('fonts/icomoon.svg?6slgri#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        
        .box {
            /* 字体类型 */
            font-family: 'icomoon';
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

效果：
在这里插入图片描述
p258追加