CSS字体图标

最新推荐文章于 2023-08-16 17:17:01 发布

溯琳

最新推荐文章于 2023-08-16 17:17:01 发布

阅读量130

点赞数 2

分类专栏： web 文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_56787796/article/details/115679817

版权

web 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

CSS字体图标

字体图标的和字体的属性相同

首先需要下载图标
推荐：icomoon字库http://icomoon.io
阿里iconfont字库http://www.iconfontcn/

icomoon字库

选完自己想要的图标后点Generate Font

然后点Downlod下载

将下载好的压缩包解压 .把下载包里面的fonts文件夹放入页面根目录下

将style.css里面的这一部分复制到CSS或style里

然后打开刚才压缩包里的demo.html

然后复制要用的图标的小方块到html

将字体设置成font-family: “icomoon”;

<!DOCTYPE html>
<html lang="en">
  <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?pimgsa");
        src: url("fonts/icomoon.eot?pimgsa#iefix") format("embedded-opentype"),
          url("fonts/icomoon.ttf?pimgsa") format("truetype"),
          url("fonts/icomoon.woff?pimgsa") format("woff"),
          url("fonts/icomoon.svg?pimgsa#icomoon") format("svg");
        font-weight: normal;
        font-style: normal;
        font-display: block;
      }
      span {
        font-family: "icomoon";
      }
    </style>
  </head>
  <body>
    <span></span>
  </body>
</html>

运行然后就出现了字体图标

span里面可以添加字体大小 font-size: 100px; 图标就变成了大图标

还可以添加颜色color: red; 就变成了红图标

追加图标

还需要用其他的图标
把压缩包里面的selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

然后重复开始的步骤替换掉原来的文件夹 fonts文件夹也需要替换
然后就可以使用追加的图标了

溯琳

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS字体图标

CSS字体图标字体图标的和字体的属性相同首先需要下载图标推荐：icomoon字库http://icomoon.io阿里iconfont字库http://www.iconfontcn/icomoon字库选完自己想要的图标后点Generate Font然后点Downlod下载将下载好的压缩包解压 .把下载包里面的fonts文件夹放入页面根目录下将style.css里面的这一部分复制到CSS或style里然后打开刚才压缩包里的demo.html然后复制要用的图标的小方块到ht
复制链接

扫一扫