Sorin D. Sorin D. - 3 months ago 6
HTML Question

Two font awesome arrows with one on top of the other with a circle around them

I have this image:

enter image description here

and I tried to do the same in

HTML
and
CSS
, with two font awesome icons. I put the
position:absolute
for one of the icon to be close to the other. I tried to make the circle around but without any success. Someone please give me a hand.



.formular {
position: relative;
}
.formular a {
text-decoration: none;
}
.circle .fa-caret-right {
font-size: 17px;
color: #000;
}
.circle {
position: relative;
border: 1px solid #CCCCCC;
border-radius: 50%;
background-color: #dce0e1;
padding: 5px;
}
.circle .fa-caret-right:first-child {
position: absolute;
left: 4px;
}
.circle .fa-caret-right:last-child {
position: relative;
}
.formular .text {
font: normal 15px 'CenturyGothic-Bold';
color: #028A92;
}

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>

<body>
<div class="formular">
<a href="#" title="Click here">
<span class="circle">
<i class="fa fa-caret-right" aria-hidden="true"></i>
<i class="fa fa-caret-right" aria-hidden="true"></i>
</span>
<span class="text">Ask for our forms</span>
</a>
</div>
</body>
</html>




Answer

i have change this

.formular .circle {
         background: #efeded none repeat scroll 0 0;
border: 1px solid #cbcbcb;
border-radius: 50%;
color: #000;
display: inline-block;
padding: 3px 3px 3px 7px;
position: relative;
text-align: center;
}

<span class="circle">
                <i class="fa fa-forward" aria-hidden="true"></i>
                <!--<i class="fa fa-caret-right" aria-hidden="true"></i>-->
            </span>

.formular {
		position: relative;
	}
	.formular a {
		text-decoration: none;
	}
	.circle .fa-caret-right {
	  font-size: 17px;
	  color: #000;
	}
	.formular .circle {
	     background: #efeded none repeat scroll 0 0;
border: 1px solid #cbcbcb;
border-radius: 50%;
color: #000;
display: inline-block;
padding: 3px 3px 3px 7px;
position: relative;
text-align: center;
}
	}
	.circle .fa-caret-right:first-child {
	  position: absolute;
	  left: 4px;
	}
	.circle .fa-caret-right:last-child {
	  position: relative;
	}
	.formular .text {
	  font: normal 15px 'CenturyGothic-Bold';
	  color: #028A92;
     }
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>

<body>
	<div class="formular">
		<a href="#" title="Click here">
			<span class="circle">
				<i class="fa fa-forward" aria-hidden="true"></i>
				<!--<i class="fa fa-caret-right" aria-hidden="true"></i>-->
			</span>
			<span class="text">Ask for our forms</span>
		</a>
	</div>
</body>
</html>

Comments