how to make the borders of icons equal sized

Question

I have footer which has few icons.These icons have border around them. The problem is that based on the icon,the border size is getting changed.But I need border with equal sizes for all the icons. Could any one help me with this.

<div class="site-footer">
    <div class="row">
       <div class="col-lg-6">
           <p class="box-1">
            You can visit us at <span class="link-webiste" style="size: 70px !important;">agoodtreeproduction.com</span></p>
       </div>
       <div class="col-lg-6">
           <h3 style="color: white;"> Around The Web</h3>
           <ul class="list-inline">
           <li class="footer-elements">
              <a href="#" class=""><i class="fa fa-facebook btn-outline icon" aria-hidden="true"></i></a>
           </li>
           <li class="footer-elements">
              <a href="#" class=""><i class="fa fa-twitter btn-outline icon" aria-hidden="true"></i></a>
           </li>
           <li class="footer-elements">
              <a href="#" class=""><i class="fa fa-google-plus btn-outline icon" aria-hidden="true"></i></a>
           </li>
           <li class="footer-elements">
              <a href="#" class=""><i class="fa fa-linkedin btn-outline icon" aria-hidden="true"></i></a>
           </li>
          </ul>
       </div>
    </div>
 </div>

css

li {
  display: inline;
}
.site-footer{
  background-color: #6E2607;
  //display: flex;
}
.box{
  height:100px;
  min-width: 200px;
}
.One{
 //background-color: blue;

}

.two{
 //background-color: yellow;

}

.box-1{
  color: white !important;

}
.footer-elements{
  padding: 20px;   
}
.icon{
  font-size: 30px !important;
}


.btn-outline{

  color:#fff;
  background:0;
  border-style:solid;
  border-radius:50%;
  transition: background-color 0.7s ease-in-out;
  margin-top: 5px;
  padding: 25px;
}

 .btn-outline:hover{
  background-color: #000000;
 }

Demo here:

https://jsfiddle.net/VijayVj7/zadx4rec/

score 0 · Answer 1 · answered Mar 12 '17 at 07:17

Add a border-width to .btn-outline so it becomes:

.btn-outline{

  color:#fff;
  background:0;
  border-style:solid;
  border-radius:50%;
  border-width: 20px;
  transition: background-color 0.7s ease-in-out;
  margin-top: 5px;
  padding: 25px;
}

Where you change 20px to whatever you need it to be.

score 0 · Answer 2 · edited May 23 '17 at 12:32

Creating equal widths for elements in the same row, while still allowing those elements to be flexible based on their content, is a good job for flexbox. As seen in this answer, you can set the parent element to display: flex, and each of your <li> tags to have flex-basis: 0 and flex-grow: 1. This is saying that each list item will start with no width, and what available growth there is will be equally distributed among all of them.

However, this setup is still going to make each item grow at least enough to fit its content. So you may have to use media queries to shrink your font size for the icons on smaller screens (otherwise you may end up outside the viewport, or longer text forcing a wider element), and/or consider setting flex-wrap: wrap on the parent (which would start a new line of icons once they can't be squeezed down any more).

Finally, I added box-sizing: border-box to the icons, so they account for padding with their widths. If you're not too far into the project, consider adding that declaration to the * selector (currently commented out), since it's generally seen as a more logical box model for elements.

The fiddle.

how to make the borders of icons equal sized

2 Answers2