如何在after和before元素中添加Font Awesome图标

Question

如何在after和before元素中添加Font Awesome图标

6

你好，我正在尝试在before和after元素中添加font awesome图标。但是我不知道如何编写它的CSS以及如何获取font awesome图标链接并将其放入before和after的CSS中。

我已创建了以下结构：

 <html>
 <head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
 </head>
 <style>
  .thish{position:relative; height:150px; width:150px ; background:red;  }
  .thish::before{position:absolute; content:'tyjthsrgd';right:40%; color:#000; bottom:0; height:30px; width:60px; background:green; z-index:1; }
 </style>
 
 <body>
  <div class="thish"> 
  </div>
 </body>
 </html>

- Sumit Kumar

Font Awesome 5有关于此的示例（尽管您正在使用v4.7.0）。 - Joonas

如果我的答案对您有帮助，请接受它。 - Gautam Naik

2个回答

3

对于Fontawesome 4

您只需要将以下CSS添加到您的after或before元素中：

font: normal normal normal 14px/1 FontAwesome;
content: '\f042';

这里的 content 是您想要添加的图标。只需从 FA 网站复制图标的 Unicode，并在 content 中加上 \ 前缀即可。

.thish {
  position: relative;
  height: 150px;
  width: 150px;
  background: red;
}

.thish::before {
  position: absolute;
  font:normal normal normal 14px/1 FontAwesome;
  content: '\f042';
  right: 40%;
  color: #000;
  bottom: 0;
  height: 30px;
  width: 60px;
  background: green;
  z-index: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<div class="thish">
</div>

- Jones Joseph

非常感谢您的回复。 - Sumit Kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gautam Naik · Accepted Answer

将before伪类选择器添加到您的样式中

   content: "\f2ba";
   font: normal normal normal 14px/1 FontAwesome;

要获取content的值，请前往他们的网站，

右键单击任何图标（<i> ::before </i>标签）然后检查before 伪选择器中内容的值。

不要忘记添加字体的值

normal normal normal 14px/1 FontAwesome;

这非常重要。

<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

</head>
<style>
  .thish {
    position: relative;
    height: 150px;
    width: 150px;
    background: red;
  }
  
  .thish::before {
    position: absolute;
   content: "\f2ba";
   font: normal normal normal 14px/1 FontAwesome;
    right: 40%;
    color: #000;
    bottom: 0;
    height: 30px;
    width: 60px;
    background: green;
    z-index: 1;
  }
</style>

<body>

  <div class="thish">
  </div>


</body>

</html>