0

I want to make a border of font awesome icon exactly like this.
How to do using css? Screenshot

shri ram
  • 15
  • 7

1 Answers1

2

See below. Hope this helps.

.icon-container {
  background: darkgreen;
  color: white;
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.icon-container::after {
  content: "";
  background: darkgreen;
  width: 1rem;
  height: 1rem;
  position: absolute;
  bottom: -5px;
  left: calc( 50% - 0.5rem);
  transform: rotate(45deg);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="icon-container">
  <i class="fa fa-car fa-2x" aria-hidden="true"></i>
</div>
Gerard
  • 15,418
  • 5
  • 30
  • 52
  • How can i display my text as same line. because while i am using div my text was moving to next line.. Any idea? – shri ram Feb 21 '18 at 08:38
  • .fa{ font-weight: 700; font-size:40px; }
    Software Development
    Mobile Apps Development
    CMS
    E-Commerce
    – shri ram Feb 21 '18 at 08:44