欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

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

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

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;

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

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

相关标签: 布局效果

上一篇:

下一篇: