如何在元素之前添加字体真棒图标

Question

如何在元素之前添加字体真棒图标

嗨,我想在元素之前和之后添加字体真棒图标.但我不知道如何写它的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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Gau*_*aik 9

添加到您的before 伪选择器

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

Run Code Online (Sandbox Code Playgroud)

要获得价值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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，5 月前
查看次数：	5058 次
最近记录：	7 年，5 月前