为什么我不能在我的 div 标签中使用 Font Awesome 图标？

Question

我一直在尝试在我制作的卡片中使用 Font Awesome 图标。不幸的是，它们根本没有出现在我的卡片 div 中的任何地方。我认为它与 .card class :before 选择器有关，考虑到它在没有它的情况下也能工作。

知道如何在不改变设计的情况下在我的名片中添加图标吗？

.card :before {
 -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #eee;
  box-shadow: 0 3px 2px rgba(52, 152, 219, 0.16);
  border-radius: 30px;
  font-size: 22px;
  font-style: normal;
  left: 50%;
  line-height: 60px;
  position: absolute;
  top: -30px;
  width: 60px;
  color: #3498db;
  content: "AA";
  font-family: 'Roboto', sans-serif;
}

这是一个Codepen

Answer 1

请在之前和 class 之间删除 space，并进行细微更改。以及字体系列和内容属性.

.card:before {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #eee;
    box-shadow: 0 3px 2px rgba(52, 152, 219, 0.16);
    border-radius: 30px;
    font-size: 22px;
    font-style: normal;
    left: 50%;
    line-height: 60px;
    position: absolute;
    top: -30px;
    width: 60px;
    color: #3498db;
    content:"\f033"
    font-family: 'FontAwesome;
}

Answer 2

您需要为此使用图标 Unicode。
检查此 link 和 css 代码：

.card:before {
   content: '\f105';
   font-family: 'FontAwesome';
   font-size: 14px;
}

Answer 3

正如赛义德·拉菲克所说。您可以使用用户图标的 code 而不是 fa-user class，即 

示例：Codepen

为什么我不能在我的 div 标签中使用 Font Awesome 图标？

Why can't I use Font Awesome Icons within my div tag?

css

font-awesome