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

标签: css  css3

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追加

版权声明:本文为my_prince原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/my_prince/article/details/108597239