Menu
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>
958
Enable Pseudo-elements Using CSS Pseudo-elements to render icons is disabled by default when using our SVG + JS Framework. You'll need to add the <script data-search-pseudo-elements ... > attribute to the <script> element that calls Font Awesome.
To insert an icon, add the name of the icon class to any inline HTML element. The <i> and <span> elements are widely used to add icons. All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)
Add to to your before pseudo selector
content: "\f2ba";
font: normal normal normal 14px/1 FontAwesome;
To get the value of content, go to their website,
Right-click -> Inspect any icon (<i> ::before </i> tag) and then check the value of the content in the before pseudo selector.
Dont forget to put the value of font
normal normal normal 14px/1 FontAwesome;
This is very important.
<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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
