字体真棒 CSS 伪元素答案

【问题标题】：Font Awesome CSS Pseudo-elements字体真棒 CSS 伪元素
【发布时间】：2018-05-29 16:56:49
【问题描述】：

我在一个项目中多次使用带有 JavaScript 的 Font Awesome SVG。现在我正在尝试创建一个按钮，因此当它悬停在指向右侧的文本右侧时，会出现一个箭头图标。当按钮悬停在上面时，图标应该是一个空白方块，并且图标与文本一起出现在左侧。

使用

display:none

去掉了按钮文本右侧的空白图标。

如何让图标出现在空白方块中？

这是代码

window.FontAwesomeConfig = {
        searchPseudoElements: true
}

.fa-arrow-right:before {
    font-family: 'Font Awesome 5 Solid';
    content: "\f061";
    font-weight: 900;

}


 .btn-4 {
    border-radius: 50px;
    border: 3px solid #fff;
    color: #fff;
    overflow: hidden;
}

.btn-4:active {
    border-color: #17954c;
    color: #17954c;
}

.btn-4:hover {
    background: #24b662;
}

.btn-4:before {
    position: absolute;
    height: 100%;
    font-size: 125%;
    line-height: 3.5;
    color: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-4:active:before {
    color: #17954c;
}

/* Button 4a */
.btn-4a:before {
    left: 130%;
    top: 0;
}

.btn-4a:hover:before {
    left: 80%;
}

/* Button 4b */
.btn-4b:before {
    left: -50%;
    top: 0;
}

.btn-4b:hover:before {
    left: 10%;
}

<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<div class="container mw-100 mx-auto margin-top-70 purple-background">
        <div class="row">
         <div class="col-8" id="forum">
            <h2 class="text-center margin-top-40">Join the Book Club</h2>
            <p class="feature-text">What are you reading? Share the book love over on the forum</p>
         </div>
         <div class="col-4">
          <div class="margin-top-60">
            <button class="btn btn-4 btn-4a fa-arrow-right">Join Us</button>
          </div>
        </div>
      </div>
    </div>

我已经截图说明问题buttons和buttons on hover

【问题讨论】：

您不需要在样式表中加载 woff 文件吗？
空白方块表示缺少字体，或元素字体错误。
它似乎工作正常，到底是什么问题？
好吧，既然投反对票的人投反对票，那么他/她愿意解释原因吗？

标签： javascript html css bootstrap-4 font-awesome-5

【解决方案1】：

要使用 font-awesome，您必须定义 font-family 并在内容中引入很棒的字体备忘单。

字体系列：

font-family: FontAwesome;

内容：

content: '/f2bb' // exemple

备忘单 - https://fontawesome.com/cheatsheet

h1 {
  margin: 25px auto;
  font-size: 40px;
  text-align: center;
  font-family: sans-serif;	
}

.box {
  width: 150px;
  height: 150px;
  background-color: #CD5C5C;
  margin: 0 auto;
  position: relative;
}

.box::after {
  content: "\f0fc";
  font-family: FontAwesome;
  font-size: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<head>
  <meta charset="UTF-8">
  <title>Font Awesome With Pseudo-Elements</title>
<!--  Font Awesome 4.6.3 CDN  -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
  <h1>Font Awesome with Pseudo-Elements</h1>
  <div class="box"></div>
</body>

【讨论】：

【解决方案2】：

除了fa-arrow-right 类，还要添加fa 类。

确保删除已应用的额外规则。

.fa-arrow-right:before {
    font-family: 'Font Awesome 5 Solid';
    content: "\f061";
    font-weight: 900;
}

fa 类将为您完成所有这些工作。

希望对您有所帮助。

【讨论】：