羡慕别人网站小图标好看？推荐两个免费的图标网站教你使用图标装饰自己的网站

程序员文章站 2023-12-25 20:02:09

...

一个网站的好坏不只取决于网站的性能与功能，还取决用户使用的舒适度。

文章目录

1.介绍字体图标
2.字体图标的下载
3.使用字体图标

1.介绍字体图标

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标，例如音乐播放器的暂停、收藏、分享等图标。
羡慕别人网站小图标好看？推荐两个免费的图标网站教你使用图标装饰自己的网站

为什么叫“字体图标”呢？

因为它展示的是图标，本质上它是属于字体的，拥有字体的属性，可以像字体一样改变字体颜色大小。

2.字体图标的下载

推荐两个下载网站：

icomoon字库网址：http://icomoon.io （外国服务器，打开网速慢）
阿里iconfont字库网址：http://www.iconfont.cn/

注意：这两个网站的图标下载都是免费的。

想要在网站使用字体图标步骤：

字体图标下载
字体图标引入html页面

教你下载icommon字库图标：
第一步：
羡慕别人网站小图标好看？推荐两个免费的图标网站教你使用图标装饰自己的网站
第二步：

第三步：

第四步：

第五步：fonts复制到项目根目录：

3.使用字体图标

a.在css样式中全局声明字体：即把这些字体文件通过css引入到我们页面中。
羡慕别人网站小图标好看？推荐两个免费的图标网站教你使用图标装饰自己的网站

b.使用字体图标(复制这些图标对应的小方框)

c.在代码中引入这些小方框(图标)：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空隙bug</title>
    <style>
      @font-face {
        font-family: "icomoon";
        src: url("fonts/icomoon.eot?raxfuq");
        src: url("fonts/icomoon.eot?raxfuq#iefix") format("embedded-opentype"),
          url("fonts/icomoon.ttf?raxfuq") format("truetype"),
          url("fonts/icomoon.woff?raxfuq") format("woff"),
          url("fonts/icomoon.svg?raxfuq#icomoon") format("svg");
        font-weight: normal;
        font-style: normal;
        font-display: block;
      }

      span {
        font-family: "icomoon";
        margin: 0px 30px;
      }
    </style>
  </head>
  <body>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </body>
</html>

羡慕别人网站小图标好看？推荐两个免费的图标网站教你使用图标装饰自己的网站
查看效果：

我上面说过，这是字体图标，拥有字体属性，来修改字体颜色：

 color: aquamarine;

羡慕别人网站小图标好看？推荐两个免费的图标网站教你使用图标装饰自己的网站
再来修改一下字体图标大小：

/* 默认字体16px是正常大小 */

font-size:10px;

羡慕别人网站小图标好看？推荐两个免费的图标网站教你使用图标装饰自己的网站

到这里，你会如何使用字体图标装饰你的网站了吗？

羡慕别人网站小图标好看？推荐两个免费的图标网站 教你使用图标装饰自己的网站

文章目录

1.介绍字体图标

2.字体图标的下载

3.使用字体图标