在 Rails 中标记为活动时如何将字形图标应用于按钮？

Question

因此，一旦用户单击该单词，我就会尝试在单词旁边添加一个复选标记的字形。想象一下，您单击 TEST 按钮，整个按钮改变颜色，并在单词 test 的左侧显示一个复选标记。

我有以下几点：

    <button type="button" class="btn wk-prd-btn" style="margin-right: 15px;"><span class="fa fa-check-circle"></span>TEST</button>

那么对于 CSS，我有：

.wk-prd-btn:focus {
  background-color: #e74481;
  color: white;
}

.wk-prd-btn:hover {
  background-color: #e74481;
  color: white;
}

我考虑过在按钮周围放置一个 div 并在 CSS 中进行叠加，但这会影响按钮本身的文本，而我不想这样做。有什么处理建议吗？

Answer 1

使用以下：

<button type="button" class="btn wk-prd-btn wk-click"> MUG</button>

然后在 CSS 中：

.wk-click:focus:before{
  content: "";
  font-family: "fontawesome";
}

只需要让按钮保持点击即可。希望我的错误可以帮助其他人。