如何在元素之前的后面添加字体真棒图标 [英] how to add the font awesome icon in after before elements
本文介绍了如何在元素之前的后面添加字体真棒图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在元素之前和之后添加字体真棒图标.但是我不知道如何编写其CSS以及如何获取字体真棒图标链接以将其放在CSS之前的后面.
Hi i am trying to add the font awesome icon in before and after elements.But i do not know how to write its css and how to get font awesome icons links to put it in the after before css.
我已经创建了这样的结构.
I have created a structure like this.
<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>推荐答案
添加到您的之前 伪选择器
content: "\f2ba";
font: normal normal normal 14px/1 FontAwesome;
要获取 content 的价值，请访问其网站
To get the value of content, go to their website,
右键单击->检查任何图标(< i> :: before</i> 标记)，然后检查 before 伪选择器.
Right-click -> Inspect any icon (<i> ::before </i> tag) and then check the value of the content in the before pseudo selector.
不要忘记输入字体的值
正常正常正常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>这篇关于如何在元素之前的后面添加字体真棒图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
