Effortlessly aligning icons in social media buttons using Bootstrap

I am encountering an issue with my social media icons that are using font-awesome icons from Bootstrap. The problem is that the icons are not centered.

Here is the code I am using, most of which was copied and pasted from an online source:

#HTML
 <!-- Add font awesome icons -->
<div class="social-btns">
   <a class="btn facebook" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
   <a class="btn google" href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
   <a class="btn linkedin" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
   <a class="btn instagram" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
   <a class="btn flickr" href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a>
   <a class="btn github" href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>

#CSS
.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
          transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
...

I am also looking to make sure the design is suitable for mobile devices. I have tried adjusting margins and text-align properties, but so far nothing has given me the desired result. Any assistance would be greatly appreciated.

htmlcsstwitter-bootstrap

Answer №1

To implement this, simply include the following CSS code: 

.social-btns .btn{padding: 18px 18px;}

.social-btns .btn{padding: 18px 18px;}

.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
-webkit-transition: all 0.35s;
transition: all 0.35s;
-webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-btns .btn:before {
top: 90%;
left: -110%;
}
.social-btns .btn .fa {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.social-btns .btn.facebook:before {
background-color: #3b5998;
}
.social-btns .btn.facebook .fa {
color: #3b5998;
}
...

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Add font awesome icons -->
<div class="social-btns">
   <a class="btn facebook" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
   <a class="btn google" href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
   <a class="btn linkedin" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
   ...
</div>

`

Answer №2

Here is the HTML code you can use to add social media buttons:

<div class="social-btns">
   <a class="btn facebook text-xs-center" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
   <a class="btn google text-xs-center" href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
   <a class="btn linkedin text-xs-center" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
   <a class="btn instagram text-xs-center" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
   <a class="btn flickr text-xs-center" href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a>
   <a class="btn github text-xs-center" href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>

Answer №3

Utilizing a flexbox for .social-btns as well as for .btn perfectly aligns and centers them in harmony.

.social-btns .btn {
  padding: 18px 18px;
}

.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
/* Additional CSS code */

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="social-btns">
  <a class="btn facebook" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
  <a class="btn google" href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
  <a class="btn linkedin" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
  <a class="btn instagram" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
  <a class="btn flickr" href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a>
  <a class="btn github" href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>

Answer №4

To enhance the appearance of your social buttons, try incorporating the line-height and text-align properties into your CSS. Simply add these rules:

.social-btns .btn{
 text-align:center;
  line-height:4.2em;
  box-sizing:border-box;
}

Check out this link for more information

I hope you find this solution beneficial.

Answer №5

To center align the social button icons and adjust the line height of the font-awesome icons, you can use the following code:

.social-btns .btn {
  text-align: center;
}

.social-btns .fa {
  line-height: 60px;
}

See below snippet: 

.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
          transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
...(rest of the CSS code here)...

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

 <!-- Add font awesome icons -->
<div class="social-btns">
   <a class="btn facebook" href="#"><i class="fa fa-facebook " aria-hidden="true"></i></a>
   <a class="btn google" href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
   <a class="btn linkedin" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
   <a class="btn instagram" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
   <a class="btn flickr" href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a>
   <a class="btn github" href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a bar chart with multiple rows using Morris.js

I am currently involved in a project and I have included the code below to generate a bar chart. In my database table called "bar," there are attributes such as id, factor, score, goal_1, goal_2, and goal_3. While I am not encountering any errors, unfort ...

phpjqueryhtmlbar-chartmorris.js

`To update the index from a different page, follow these steps`

My webpage features a straightforward grid displaying information from the database on index.php. Users can click on a link to edit a record, which redirects them to edit.php. After editing, I am seeking a method to automatically refresh index.php with the ...

phpajaxhtml

What are some ways I can customize this jQuery :submit selector demonstration?

After reviewing the jQuery example provided here, I am curious about how to adjust the code in order to change the color of a cell only when the value of the submit button within that cell meets certain criteria. For instance: var submitEl = $( ...

javascriptjqueryhtml

Is it advisable to clear the bootstrap tooltips array in order to conserve browser memory once I have finished rendering new tooltips?

My apologies if this question has been asked before, but I searched online first and couldn't find a helpful answer. Beautiful Views Recently, I was working on a project where I needed to display search results, each accompanied by a button that trig ...

javascripttwitter-bootstrapbootstrap-5

Expanding the width of the containing div using CSS

I have a main container with multiple smaller divs inside it. None of these small divs have specified widths. I want the black div to expand and fill up the entire space, stretching all the way to the ABC div on the right. This only needs to work in Chr ...

csshtmlwidth

Why is ng-bind-html not functioning within ng-repeat when ngSanitize is included in the module?

I'm a beginner with AngularJS and I'm trying to bind tags inside an ng-repeat loop, but I've tried using ng-bind-html and ng-bind-html-unsafe without success. The output is not displaying correctly. <script src="https://ajax.googleapis.c ...

htmlangularjs

Calculate the total width of LI elements and apply it to the parent UL or DIV

Is there a way to calculate the Total LI width and then set the width for the parent div? Here is an example of my code: <ul> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds&l ...

jqueryhtmlcss

Rearrange the order of all elements following a specific li element to the beginning with the help of

How can we rearrange elements in a ul list using jQuery after selecting a specific li element? For example, moving all elements after the third li to the beginning. <ul> <li>1</li> <li>2</li> <li>3</li> <li>4 ...

javascripthtmljquerydom

What is the best way to horizontally center a child div within its parent container while keeping it fixed at the top?

I am struggling to center a child div horizontally within its parent div while also fixing it to the top of the parent. I have tried various approaches in CSS, but so far I haven't been successful :-( I can either center it or fix it to the top, but w ...

htmlcss

Dynamic dropdown in Bootstrap automatically closes upon selecting an item from the list

I am encountering an issue with a dynamically created dropdown on a page. The HTML code for the dropdown is injected into the page after an AJAX call. While I can open the dropdown by clicking on a special anchor, I am unable to interact with any elements ...

ajaxtwitter-bootstrap

Why does the alt text show up when the gif image fails to display?

While transitioning between pages, I am using a GIF image as a 'loader'. However, during the first 2 or 3 navigations, I can see the image, but for the rest of the transitions, instead of the image, I can only see the "alt" text that I have provi ...

htmlcssimagegifloader

What is the best way to synchronize the image dimensions and source when dynamically loading images?

I am facing an issue with a function that updates images by altering the src and css (width/height) of an IMG tag within the document. Below is a simplified example to demonstrate the problem: updateImage = function(src, width, height) { $("#changeMe"). ...

javascriptjquerycssimage

Employing absolute picture placement

I have a collection of clipped images, each with an absolute position: <img style='position:absolute;clip(xpx xpx xpx xpx);'/> <img style='position:absolute;clip(xpx xpx xpx xpx);'/> <img style='position:absolute;cl ...

javascriptjqueryhtmlcss

What is the best way to send HTML tag content to mark.js and delimit them with a space or comma?

I have been utilizing the mark.js library to highlight keywords on a webpage, and it's been working well. However, I now need to insert an extra space or a comma after each tag such as h1, h2, etc. Initially, I thought about using a loop like the one ...

javascripthtmlarraysmark.js

Finding image input loading

When working with the following code: <input type="image" ... onLoad="this.style.opacity = 1" /> Everything seemed to be functioning well in IE, but encountered an issue in Chrome where the onLoad event failed to trigger upon image load. It's ...

javascripthtmlcssonload

Issue with Electron Remote process failing to take user-defined width and height inputs

I'm currently facing an issue with utilizing remote windows in electron. I am attempting to process user input and use that input to generate a new window with specific width and height. However, when I hit submit, nothing happens. I can't figur ...

javascripthtmlnode.jselectron

Guide to vertically aligning text in an overlay using CSS within Angular 2

I currently have an overlay on my page that displays a spinner (an Angular material component) and accompanying text. This overlay covers the entire page and prevents clicking on elements below it. The spinner is positioned in the center of the page, and ...

cssangularoverlay

Creating a Dynamic Grid Layout: A Step-by-Step Guide

Having created a specific grid layout using HTML and CSS, I am struggling to make it work across all devices. I have already created the CSS, but I seem to be missing something in the HTML, such as the col-md or col-sm classes from Bootstrap. However, ever ...

htmlcssbootstrap-4gridresponsive

Setting the minimum and maximum width of the MenuItem (popover) in Material-UI based on the width of the select component

I need the popover width to always match the width of the select component, regardless of the length of the text in the menu items. Setting autoWidth to either true or false is not providing a solution. Below is the code for the select component: import ...

cssreactjswidthmaterial-uihtml-select

Spring framework experiencing issues with loading CSS and JavaScript files

I'm facing an issue with my Spring-MVC application where the CSS and JS files are not loading even though they are correctly called. Can anyone help me figure out what I'm doing wrong? Resources folder: Project --> webapp --> resources - ...

javascriptjavacssspringspring-mvc