首页 > 其他分享 >Font Awesome 的图标类名怎么加入项目

Font Awesome 的图标类名怎么加入项目

时间:2023-04-23 15:47:25浏览次数:36  
标签:样式 Awesome 类名 Font CSS 图标

Font Awesome 的图标类名怎么加入项目

要在 HTML 中引入图标,您需要使用 i 元素,并将 Font Awesome 的 CSS 类名作为 i 元素的类属性。

以下是一个示例代码,演示如何使用 Font Awesome 的大拇指向上图标

<!-- 引入 Font Awesome 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

<!-- 在 HTML 中使用 Font Awesome 的大拇指向上图标 -->
<i class="fas fa-thumbs-up"></i>

在这个示例代码中,我们使用 link 元素引入了 Font Awesome 的 CSS 文件。然后,我们创建了一个 i 元素,并将 fas fa-thumbs-up 这两个类名添加到元素的类属性中,以指定要显示的图标类型。

请注意,如果您要在本地使用 Font Awesome,则需要通过下载并将字体和 CSS 文件添加到您的项目中来获取这些图标。然后,在 HTML 文件中添加对 CSS 文件的链接标记,就像上面的代码示例一样。
参考

点赞图标可不可以是白色的

使用 CSS 样式表:您可以使用 CSS 样式表来更改 Font Awesome 图标的颜色。例如,要将大拇指向上图标的颜色设置为白色,请添加以下代码到您的样式表中:

.thumbs-up {
  color: #fff; /* 或者其他你想要的颜色 */
}

点赞图标可不可以不要是实心的

默认情况下,Font Awesome 5 使用具有填充颜色的图标来表示“实心”样式。如果您想要使用没有填充颜色的图标来表示“轮廓”或“线性”样式,则需要使用不同的 CSS 类名。

以下是一些可用于 Font Awesome 线性/轮廓图标的类名:

  • far:表示 Regular 样式(在免费版本中提供)
  • fal:表示 Light 样式(在 Pro 版本中提供)
  • fad:表示 Duotone 样式(在 Pro 版本中提供)

例如,要将大拇指向上图标设置为线形样式,请将 fas 类名更改为 far,如下所示:

<i class="far fa-thumbs-up"></i>

在这个例子中,我们使用了 far 类名来指定 Font Awesome 的 Regular 样式,从而使大拇指向上图标显示为线性图标。

标签:样式,Awesome,类名,Font,CSS,图标
From: https://www.cnblogs.com/xxdmua/p/17346714.html

相关文章

  • Awesome GPT 来了!
    大家好!我是韩老师。GPT,ChatGPT,OpenAI,LLM(大语言模型)等等技术的出现与应用,改变了许多的行业和人。长期来看,类GPT的技术会对整个世界有着持续的改变。我们几乎每天都会看到新的类GPT的服务、应用、框架、工具等内容的出现。然而,这些信息往往都是支离破碎,来自不同渠道的......
  • Android Studio类名冲突快捷键
    AndroidStudio类名搜索快捷键Ctrl+N。1.遇到问题2.解决问题直接在jar包里面把冲突的类删掉。......
  • font-display 文本在网页字体加载期间保持可见状态
    为确保文本在网页字体加载期间保持可见状态,可以考虑以下几种方法:1.使用系统默认字体或web-safe字体:这些字体通常是已经在大多数操作系统和浏览器中安装和加载的,因此在页面加载期间可以立即呈现。这样,即使自定义字体尚未加载,文本也将始终可见。2.通过CSS实现字体预加载:可以在C......
  • YOLOV8中文类名显示报错
    YOLOV8中文显示问题问题引出:​ 最近再跑YOLOV8项目,跑到这份数据集的类名是中文类名,自己也没有太在意,知道的过程出现些报错,这些爆错如下:/usr/local/lib/python3.8/dist-packages/ultralytics/yolo/utils/metrics.py:399:UserWarning:Glyph24102(\N{CJKUNIFIEDIDEOGRAPH-5E......
  • 直播app源码,使用vue-awesome-swiper创建轮播图幻灯片
    直播app源码,使用vue-awesome-swiper创建轮播图幻灯片1.引入引入方式可以参考官方文档,两种方式选一种即可:vue-awesome-swiperatv3.1.3 (1)第一种方式:在main.js入口文件中全局引入 ///src/main.js //swiper全局引入importVueAwesomeSwiperfrom'vue-awesome-swiper'im......
  • MFC-HFONT字体
    GDI中默认的字体,是系统等宽字体,比如对话框标题一般就采用这个字体。        ......
  • OSError: cannot open resource ImageFont.py 解决方法
    Traceback(mostrecentcalllast):File"C:/python37/pla.py",line7,in<module>newfont=ImageFont.truetype('./songti.ttc',60)#Songti.ttc代表字体,60代表字号File"C:\python37\lib\site-packages\PIL\ImageFont.py",......
  • 网页下滑超过一定高度时添加类名(以顶部导航为例)
    //html部分<headerclass="header"><divclass="containerall_top_navclearfixcontentAll"><divclass="flleft"><ahref="javascript:void(0)"><img......
  • 利用hibernate分析数据库中的表,属性以及对应的类的类名,字段
    2010-08-1109:27hibernate获得数据库的表名列名及其数据@TestpublicvoidtestHIbernateConfig1(){SessionFactoryfactory=newAnnotationConfiguration().configure().buildSessionFactory();AbstractEntityPersisterclassMetadata=......
  • 如何破限使用 Adobe Fonts 中的字体(以Forma DJR为例)
    朋友推荐游戏中的英文使用等线字体FormaDJR,搜索了之后发现官网花里胡哨完全看不懂(英语差,懒),而AdobeFonts里能够免费授权CreativCloud用户非商业使用,不巧的是我也买不起正版adobe软件,于是在网上疯狂搜索如何白嫖使用,以下是逐步破解使用过程。需要使用的字体:FormaDJRDeck|Ad......