HTML 字体图标如何使用

最新推荐文章于 2024-06-24 10:48:15 发布

原创最新推荐文章于 2024-06-24 10:48:15 发布 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5

本文介绍字体图标的基本概念，如京东小三角和小米购物车图标，推荐阿里图标库资源。详细讲解如何下载、声明及使用字体图标，包括路径设置、样式调整，并提供常见问题解决方案。

什么是字体图标？

京东网站的小三角

在这里插入图片描述

小米网站的购物车

在这里插入图片描述

去一些网站下载一些自己要用的图标，推荐去阿里的（https://www.iconfont.cn/）

下载代码，完成之后解压打开index.html

在这里插入图片描述

在下面会教怎么使用

在这里插入图片描述

首先是声明字体

在这里插入图片描述

其次就是这样
在这里插入图片描述
span 里面的代码要根据你下载代码里面的参考
这是我下载的，比如

在这里插入图片描述

打开并没有效果，检查下路径

我的文件是放在了fonts里面
在这里插入图片描述

而代码

    @font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
注意了哈，url是直接写的，所以根据我的情况，在url前面都加上fonts/

在这里插入图片描述

有了，还可以自己修改大小以及颜色等

span{
    font-family:iconfont;
    font-size:312px;
    color: red;
}

效果：
在这里插入图片描述

注意事项：

如果没有字体是一个方块的话，首先检查下文件有没有放进来，其次就是声明字体时文件的路径是否正确。

如果想深入了解icon图标的话，建议访问这篇文章。