字体图标的下载【前端知识】

Fy哥

已于 2022-05-22 12:03:19 修改

阅读量1k

点赞数 6

分类专栏：前端笔记文章标签：前端 css html vscode

于 2022-05-22 12:02:36 首次发布

本文链接：https://blog.csdn.net/qq_56402474/article/details/124908269

版权

笔记同时被 2 个专栏收录

95 篇文章 8 订阅

订阅专栏

前端

27 篇文章 1 订阅

订阅专栏

写在前面的话：

参考视频：黑马程序员pink老师 HTML CSS 入门教程
下载图标官网地址：Icon Font & SVG Icon Sets ❍ IcoMoon

1.选图标

2.下载图标到本地

3.将下载的压缩包解压，提取出fonts文件夹

1.选图标

进入官网选择 IcoMoon App

选择你想要的图标

如果你觉得这些图标不够用，可以将鼠标滚轮滑到最下面，选择Add icons...

点击Purchase,就可以添加到你的Library了

2.下载图标到本地

选好图标后，就点击最下边的Generate Font

跳转到另外的界面，点击Download

3.将下载的压缩包解压，提取出fonts文件夹

将压缩包解压到当前文件夹

将fonts文件夹复制到文件的根目录下

复制到文件的根目录

4.在CSS中声明字体

打开你解压的压缩包中的CSS文件

双击打开style.css之后，我们可以在VScode下可以复制粘贴下面的几行代码。

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?c9gcxb');
  src:  url('fonts/icomoon.eot?c9gcxb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?c9gcxb') format('truetype'),
    url('fonts/icomoon.woff?c9gcxb') format('woff'),
    url('fonts/icomoon.svg?c9gcxb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

复制到你的HTML文件的style中去

当然，我们可以使用外部样式，同样采取相关的操作

5.使用字体图标

在body标签下增加这两行代码，像使用普通字体一样

再一次打开解压后的压缩包中的demo.html文件

复制内容

复制到这里

6.实操代码

<!DOCTYPE html>
<html lang="zh-CN">

<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>字体图标的使用</title>
    <style>
        /* 一定要声明字体 */
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?c9gcxb');
            src: url('fonts/icomoon.eot?c9gcxb#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?c9gcxb') format('truetype'),
                url('fonts/icomoon.woff?c9gcxb') format('woff'),
                url('fonts/icomoon.svg?c9gcxb#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        /* 搜索字体图标 */
        .icon-search {
            color: #ff5000;
            font: 125px 'icomoon';
        }

        /* 爱心字体图标 */
        .icon-heart {
            color: #ff0000;
            font: 125px 'icomoon';
        }
    </style>
</head>

<body>
    <span class="icon-search"></span>
    <span class="icon-heart"></span>
</body>

</html>

效果截图