首页 > 解决方案 > 在 sass 中定义字体真棒内容时不显示

问题描述

因此,无论出于何种原因,我都无法让我的字体很棒的内容项目在我的.sass文件中工作,我已经尝试了书中的每个选项。

这是wp_register_script在 WP 中调用 Font Awesome 的原因:

wp_register_script(
    'font-awesome',
    'https://use.fontawesome.com/releases/v5.14.0/js/all.js',
    [],
    '5.14.0',
    true
);

如下图所示footer在此处输入图像描述

然后这里是我的&:after假电话:

&:after
  content: "\f105"
  position: absolute
  right: 30px
  transition: all 0.5s
  font-weight: 900
  font-style: normal

这是我得到的结果:
在此处输入图像描述

我在实际网站内和实际网站上呈现的所有内容console都只是一个黑匣子,我希望能够显示>箭头。

所有帮助将不胜感激!

标签: htmlcsssass

解决方案


您需要为 :after 伪元素指定字体系列,还可能需要 - display: block 或 display: inline-block 以允许它呈现...

而且 - 由于您将其设置为 position: absolute - - 您需要将其父元素设置为 position: relative 以允许正确定位....

   .menu-list s span { 
     position: relative; // added this - to allow absolute poisitioning of the icon within the span.
   } 

&:after {
  content: "\f105",
  position: absolute,
  right: 30px,
  transition: all 0.5s,
  font-weight: 900,
  font-style: normal,
  font-family: FontAwesome, // added this line
  display: block, // added this line
  ...
}

推荐阅读