CODEWITHSUNDEEP
htmlcssfont-awesome
wdGelwix
wdGelwix

Reputation: 189

Draw a line in CSS between FA icons

How can I achieve this effect? I used FA (Font Awesome) icons and added the border myself, when I use the ::after and add a line, for example, like:

Content: "";
Background-color: grey;
height: 2px;
width: 300px;

it starts right after the icon itself ( not after the border ). I'm new to CSS, is this the way to go about it? I tried searching for that, but couldn't formulate my question, so I couldn't find an answer. Sorry if this is repetitive, thanks a lot.

Example

HTML code used 

  <div class="content-wrap">
    <i class="fa fa-music icon1"></i>
    <i class="fa fa-signal icon1"></i>
    <i class="fa fa-star-o icon1"></i>
    </div>

CSS code used

.icon1 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6rem;
    height: 6rem;
    font-size: 3rem;
    color: #777;
    border: 2px solid #777777;
    border-radius: 50%;
    padding: 1rem;

They are spaced out in a container with a width of 1140px. the content-wrap div has display: flex, and justify-content: space-between;

Upvotes: 2

Views: 6407

Answers (2)

curveball
curveball

Reputation: 4505

I think I could make it work. Check it out. It is even responsive and the circles don't overlap on small viewports. The code is pretty self-descriptive. However, there are 3 key points I would like to highlight:

  1. Usage of calc() that allows us to calculate values (width) and, thus, make lines responsive;
  2. Positioning that allows us to place lines outside the circles;
  3. Property justify-content: space-between; that creates space among circles;

.content-wrap {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.icon1 {
    width: 6rem;
    height: 6rem;
    font-size: 4rem!important; /* !important is here just to override SO styles*/
    color: #777;
    border: 2px solid #777777;
    border-radius: 50%;
    padding: 1rem;
    text-align: center;
    line-height: 6rem!important; /* !important is here just to override SO styles*/
}
.icon1:not(:last-of-type)::after {
    content: "";
    background-color: grey;
    height: 2px;
    width: calc(100%/2 - 14rem); /* 6rem width of left circle + (1 + 1)rem its paddings + (1 + 1)rem positioning + 3rem half-width of central circle + 1rem its padding*/
    position: absolute;
    top: 50%;
    margin-top: -1px;
}

.icon1:nth-child(1)::after {
    left: 9rem;
}

.icon1:nth-child(2)::after {
    right: 9rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="content-wrap">
    <i class="fa fa-music icon1"></i>
    <i class="fa fa-signal icon1"></i>
    <i class="fa fa-star-o icon1"></i>
    </div>

Upvotes: 0

Ori Drori
Ori Drori

Reputation: 193258

You can add a line using the ::before pseudo-element under the circles, and use the circles background, and box-shadow to hide parts of the line.

.content-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F9F9F9;
  padding: 1em;
  overflow: hidden;
}

.content-wrap::before {
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  left: 0;
  Content: "";
  Background-color: grey;
  height: 2px;
}

.icon1 {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6rem;
  height: 6rem;
  font-size: 3rem;
  color: #777;
  border: 2px solid #777777;
  border-radius: 50%;
  padding: 1rem;
  background: #F9F9F9;
  box-shadow: 0 0 0 0.5em #F9F9F9;
}
<div class="content-wrap">
  <i class="fa fa-music icon1"></i>
  <i class="fa fa-signal icon1"></i> 
  <i class="fa fa-star-o icon1"></i>
</div>

Upvotes: 1

Related Questions