如何在元素之前添加字体真棒图标[重复]答案

【问题标题】：how to add the font awesome icon in after before elements [duplicate]如何在元素之前添加字体真棒图标[重复]
【发布时间】：2018-05-28 18:37:08
【问题描述】：

嗨，我正在尝试在元素之前和之后添加字体真棒图标。但我不知道如何编写它的 css 以及如何获取字体真棒图标链接以将它放在 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>

【问题讨论】：

Font Awesome 5 有 examples about this（尽管您使用的是 v4.7.0）。
如果我的回答对你有帮助，请采纳

标签： html css font-awesome

【解决方案1】：

添加到您的before 伪选择器

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

要获取content的值，去他们的website，

右击->检查任意图标（<i> ::before </i>标签）然后检查beforepseudo选择器中内容的值。

不要忘记输入字体的值

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>

【讨论】：

有没有办法包含图标并带有文本？类似content: "\f2ba - message that appears next to icon"

【解决方案2】：

Fontawesome 4

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

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

这里的content 是您要添加的图标。只需从 FA 网站复制图标的 Unicode 并将其粘贴到带有 \ 前缀的内容中。

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

【讨论】：

非常感谢您的回复。