Question

我一直试图在我制作的卡片中使用Font Awesome图标。不幸的是，他们根本没有出现在我卡片的任何地方。我认为它与.card类: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

Sayed Rafeeq说。您可以使用用户图标的code代替fa-user类，

示例：Codepen

Answer 2

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

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

Answer 3

请进行微小更改，删除之前和课程之间的空格。和font-family和content属性。

.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;
}

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

3 个答案: