当前位置: 首页 > 面试题库 >

Font Awesome 5在伪元素中选择正确的字体系列

乌璞瑜
2023-03-14
问题内容

我目前对在CSS伪元素中使用图标感到困惑。有4种字体家庭为fontawesome: ,Font Awesome 5 Free,,Font Awesome 5 SolidFont Awesome 5 BrandsFont Awesome 5 Regular

这是HTML:

<h1>Hello</h1>

Case 1

如您所见,它是一个brands图标,所以font-family:Font Awesome 5 Brands

h1:before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f099"; /* TWITTER ICON */
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

Case 2

如您所见,它是一个solid图标,所以font-family:Font Awesome 5 Solid

h1:before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f095"; /* PHONE ICON */
  font-family: "Font Awesome 5 Solid";
  font-weight: 900;
}

我们如何知道何时使用正确的字体系列?


问题答案:

只需将它们全部使用在同一位置font-family,您的浏览器即可完成工作。如果它在第一个中找不到,它将使用第二个。(Font-Family属性中有多种字体?)

顺便说一句,正确的font-family方法Free不是Solid因为Solid和Regular之间的差异是font-weight和两者都相同font-family。在font-family中没有 Solid and Regular,只有Freeand Brands。

您可能还会注意到,Solid图标的几乎所有版本都是免费的,但并非所有regular版本都是免费的。其中一些包含在PRO软件包中。如果没有显示图标,则不一定是font-family问题。

所有Light和duotone版本均为PRO版本。

.icon {

  display: inline-block;

  font-style: normal;

  font-variant: normal;

  text-rendering: auto;

  -webkit-font-smoothing: antialiased;

  font-family: "Font Awesome 5 Brands","Font Awesome 5 Free";

}



.icon1:before {

  content: "\f099";

  /* TWITTER ICON */

  font-weight: 400;

}



.icon2:before {

  content: "\f095";

  /* PHONE ICON */

  font-weight: 900;

}



.icon3:before {

  content: "\f095";

  /* PHONE ICON */

  font-weight: 400;/*This one will not work because the regular version of the phone icon is in the Pro Package*/

}


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >



<div class="icon1 icon"></div>

<div class="icon2 icon"></div>

<br>



<div class="icon3 icon"></div>


 类似资料:
  • 问题内容: 我想选择伪元素 这是我的CSS: 码 问题答案: 直接绑定到伪元素是不可能的,因为它们不是DOM的一部分,但是可以通过绑定到父元素并测试与作用于该元素的元素相关的偏移来近似达到预期的效果: 以下显示为,其中单击“ ELEMENT”和“ ++”分别会触发不同的行为:

  • 伪元素选择器,并不是基于真正的元素,而是基于元素当前所具有的特性来选取元素。由于这些元素本身并不存在于文档中,只是基于元素的抽象,因此称作伪元素。 伪元素选择器是CSS 中已经定义好的选择器,不能由用户随便起名,只能按CSS规定的标准格式使用。语法格式为: 选择器:伪元素 { 属性: 值 } 伪元素选择器在CSS中一直存在,但CSS3对伪元素进行了一定的调整,把选择器和伪元素之间冒号,由CSS1和

  • 问题内容: 通用选择器是否会影响伪元素,例如和? 让我举一个例子: 执行此操作时: ......没有上述声明包括自动/影响伪元素,如和呢? 或者,为了影响诸如和的伪元素,必须声明这一点? 这有意义吗? 我一直只使用伪元素,而从来没有任何问题。但是我看到许多教程在做,但是它们从没有真正解释为什么将它们包含在声明中。 问题答案: 不,通用选择器不影响伪元素(通过继承间接除外,因为伪元素通常作为实际元素

  • 我试着练习用CSS选择器获取值,我想出了这个(不像预期的那样工作) (我也尝试过) 我对的期望:第三个没有id属性和data-ad-show属性的元素被选中,其值将是所需的值3。

  • 问题内容: 我正在尝试使用pythonselenium登录到网页。我找到了一个元素并将其启用,但是当我尝试向其发送send_keys()时出现错误。错误输出的主要内容(我认为)是 我的代码是 输出是 那么,我该怎么办? 问题答案: 为了使用户名字段可见,您需要将光标移动到登录链接:

  • 问题内容: 我有一个:before开头的’quote’和一个:after结束的报价。 现在,我想要的是一个:after:after供“引用”参考,但我无法使其正常工作。 有人知道这是否可能吗? 到目前为止,我的代码: 问题答案: 已经提出了嵌套和伪元素的想法;请参阅“生成和替换的内容”模块的这一部分。但是,该模块已被放弃,等待完全重写,因此在重新发布该文档之前,我不会屏息。即便如此,嵌套内容伪元素