ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

fontawesome 如何让图标是空心显示的

2024-07-10 12:29:26  阅读:261  来源: 互联网

标签:


要使 FontAwesome 图标以空心形式显示,您可以使用 FontAwesome 提供的 CSS 类 far 来实现。far 类用于表示空心图标。

以下是使用 far 类的示例代码:

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
      integrity="sha384-xB1gtBv7MTv0Tl7/y9fJtcel/+LUGrH0i2eTbUyGRaAhN5sjsmzEEU8uUV0Z9aeu"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <i class="far fa-heart"></i>
  </body>
</html>

HTML

在上面的示例中,我们通过 <link> 标签导入了 FontAwesome 的 CSS 文件。然后,使用 <i> 标签并添加类名 far fa-heart,其中 fa-heart 是 FontAwesome 提供的爱心图标的类名,而 far 则表示该图标以空心形式显示。

您可以根据您需要使用的 FontAwesome 图标来更改类名。

希望对您有所帮助!

标签:
来源:

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有