Tips for resolving highlighted font awesome Facebook icon issue

Looking to create a circle around a fontawesome social media link. The circle works for most icons, but the Facebook icon is causing issues. The highlight circle does not fit correctly with the Facebook icon. How can this be resolved?

.social-media span {
  list-style-type: none;
  padding: 5px 5px;
  background-color: pink;
  display: inline-block;
  border-radius: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<title>Hi</title>

<body>
  <ul class="social-media list-inline" align="right">
    <li><a href="#"><span class="fa fa-facebook"></span></a></li>
    <li><a href="#"><span class="fa fa-envelope"></span></a></li>
    <li><a href="#"><span class="fa fa-twitter"></span></a></li>
    <li><a href="#"><span class="fa fa-youtube-play"></span></a></li>
    <li><a href="#"><span class="fa fa-instagram"></span></a></li>



  </ul>
</body>

htmlcsstwitter-bootstrap-3

Answer №1

.social-media {
  display: flex;
  justify-content: center;
}
.social-media li {
  list-style-type: none; 
  background-color: pink;
  display: inline-block;
  text-align: center;
  height: 30px;
  width: 30px;
  font-size: 30px;
  line-height: 30px;
  border: 2px solid #ccc;
  border-radius: 20px;
}
<html>
  <head>
  <script src="https://use.fontawesome.com/a2e210f715.js"></script>
  </head>
  <body>
    <ul class="social-media">
      <li><a href="#"><span class="fa fa-facebook"></span></a></li>
      <li><a href="#"><span class="fa fa-envelope"></span></a></li>
      <li><a href="#"><span class="fa fa-twitter"></span></a></li>
      <li><a href="#"><span class="fa fa-youtube-play"></span></a></li>
      <li><a href="#"><span class="fa fa-instagram"></span></a></li>
    </ul>
  </body>
</html>

Set the height and width properties for the icons.

Answer №2

To adjust the width of the .social-media section, you can set it as follows:

.social-media span {
  list-style-type: none;
  padding: 5px 5px;
  background-color: pink;
  display: inline-block;
  border-radius: 20px;
  width: 15px;
  text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hi</title>
<body>
<ul class="social-media list-inline" align="right">
                    <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                    <li><a href="#"><span class="fa fa-envelope"></span></a></li>
                    <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                    <li><a href="#"><span class="fa fa-youtube-play"></span></a></li>
                    <li><a href="#"><span class="fa fa-instagram"></span></a></li>

                       </ul>
</body>

Answer №3

Here is the solution:


.circle{
border-radius: 50%;
margin: 0.15em;
font-size: 3em;
}

.fa-twitter{
background: #4099FF;
color: #FFFFFF;
  padding: 0.05em 0.07em;
}

.fa-google-plus{
  color: #FFFFFF;
  background: #dd4b39;
  padding: 0.1em 0.1em;
  }  

.fa-dribbble{
color: #ea4c89;
}

.fa-pinterest{
color: #cb2027;
}

.fa-facebook{
background: #3B5998;
color: #FFFFFF;
  padding: 0.05em 0.3em;
}

.fa-youtube{
background: #bb0000;
color: #FFFFFF;
  padding: 0.25em 0.25em;
  
}
<link href="https://example.com/font-awesome/css/font-awesome.css" rel="stylesheet">

<i class="fa fa-twitter circle"></i>
<i class="fa fa-facebook circle"></i>
<i class="fa fa-google-plus circle"></i>
<i class="fa fa-dribbble circle"></i>
<i class="fa fa-pinterest circle"></i>
<i class="fa fa-youtube circle"></i>

Answer №4

To center align social media icons using the fa-stack class, simply remove the paddings and apply the text-align: center property. You can see a live example in this fiddle, along with the code snippet below. No extra classes necessary!

.social-media span {
  list-style-type: none;
  background-color: pink;
  display: inline-block;
  border-radius: 20px;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<title>Hi</title>

<body>
  <ul class="social-media list-inline" align="right">
    <li><a href="#"><span class="fa fa-stack fa-facebook"></span></a></li>
    <li><a href="#"><span class="fa fa-stack fa-envelope"></span></a></li>
    <li><a href="#"><span class="fa fa-stack fa-twitter"></span></a></li>
    <li><a href="#"><span class="fa fa-stack fa-youtube-play"></span></a></li>
    <li><a href="#"><span class="fa fa-stack fa-instagram"></span></a></li>
  </ul>
</body>

Answer №5

.social-media span {
  list-style-type: none;
    background-color: pink;
  display: inline-block;
  border-radius: 20px;
  height: 30px;
  width: 30px;
}
.social-media span i {
  padding: 5px 9px
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hello</title>
<body>
<ul class="social-media list-inline" align="right">
                    <li><a href="#"><span ><i class="fa fa-facebook"></i></span></a></li>
                    <li><a href="#"><span><i class="fa fa-envelope"></i></span></a></li>
                    <li><a href="#"><span ><i class="fa fa-twitter"></i></span></a></li>
                    <li><a href="#"><span ><i class="fa fa-youtube-play"></i></span></a></li>
                    <li><a href="#"><span ><i class="fa fa-instagram"></i></span></a></li>



                       </ul>
</body>

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 dynamic form that efficiently captures user information and automatically redirects to the appropriate web page

Sorry for the unusual question, but it was the best way I could think of asking. I have come across websites with fill-in-the-blank lines where you can input your desired information and then get redirected to another page. For example: "What are you sea ...

javascripthtmlcsswordpress

Is there a method in AngularJS to automatically set app.comment to null if the point is not equal to 1 using front end logic?

Can we verify on the front end in AngularJS if app.point !=1 and app.comment==null? <td> <input type="number" max="5" min="1" ng-init="app.point=5" data-ng-model="app.point"> </td> < ...

javascriptangularjshtml

Create an interactive quiz using JQuery that focuses on sorting and organizing

Hey there, I need some advice on creating a quiz for ordering and sorting in HTML5/JQuery. Basically, I want to display a random set of steps on the page that users have to organize correctly. I found an example using jQuery and jquery-ui-1.8.5.custom.min. ...

javascriptjqueryhtml

Turn off HTML display for Internet Explorer users

I am looking to implement code that will block certain pages for Internet Explorer users, making it accessible only for Google Chrome and Firefox users. Do you have any suggestions on how I can achieve this or if there are existing solutions available? I& ...

javascriptphphtmlbrowserweb

conditional statement for manipulating data in javascript/html

I am working on appending results in an object as options in a datalist dropdown. While it is functioning correctly, the issue arises when not all elements have a specific level in the object consistently, impacting which results are added to the list. $( ...

javascriptjqueryhtml

After I click on an operator button, the display on my HTML calculator does not reset

function aClick(){ if(a === undefined){ numberButtons.forEach(button => { button.addEventListener("click", addNumber) }); operatorButtons.forEach(button => { button.addEventListener(' ...

javascripthtml

Click event to reset the variable

The code snippet in Javascript below is designed to execute the function doSomethingWithSelectedText, which verifies if any text is currently selected by utilizing the function getSelectedObj. The getSelectedObj function returns an object that contains in ...

javascripthtmlcssdom-events

The alignment of elements side by side in Angular Flex is not supported, specifically in versions Angular 8.2.1 and Flex-Layout 8.0.0.beta 26

I'm attempting to arrange my boxes in a single line, with the ability to wrap and switch to column mode on smaller phone screens. Desired layout: Wins Losses Ties Points On shrinking screen: Wins Losses Ties Points Code ...

htmlangularflexboxangular-flex-layout

Is it possible for me to create a menu using the .row and .col classes from Bootstrap?

I attempted to create a menu using Bootstrap's cols. Something similar to this: https://i.stack.imgur.com/55xst.png However, I faced numerous challenges when trying to implement it into Wordpress and realized that it may not be the best approach... ...

htmlcssmenutwitter-bootstrap-3

Interactive Sidebar Navigation Content

On my website, I have a navigation sidebar that contains links to all of the main site pages. Each page has the same links, except the link to the current page is not included, making it easy to visually identify which page you are on. Currently, I manuall ...

javascripthtml

Unable to display D3.js bar graphs

Hello! I'm attempting to replicate a bar chart from this source but unfortunately, my bars are not displaying properly. I'm confident that I've inputted the correct values for the y and height parameters. Could someone kindly assist me with ...

javascripthtmld3.js

Items on Bootstrap have been expanded to fit larger screens

I'm currently working on a webpage () and facing an issue with the size of objects on a specific screen resolution. When users click on items in the accordions, multiple information cards are displayed. However, on larger screens, these cards appear ...

htmlcsstwitter-bootstrap

"Troubleshooting issue in Django 1.6.2 where CSS styles are not being applied to

I am encountering an issue with this code and would greatly appreciate some assistance. The base.html file contains a {% block content %}{% endblock %}. I have created a Signup.html file structured like this: {%extends 'base.html'%} {% block co ...

pythonhtmlcssdjangohttp-redirect

What is preventing me from using the JavaScript toggle button multiple times?

I am currently trying to implement a JavaScript toggle button in two different sections on the same page, but I am encountering difficulties. I attempted to change the IDs as well, but it didn't seem to work. Is it not possible to achieve this, or am ...

javascripthtmlbootstrap-5

Calculating the sum of numbers within a PHP Foreach loop

I'm looking to calculate the total sum of individual records within a foreach loop. My table structure is as follows: <table> <tr> <th>Person Name</th> <th>Balances</th> <th>Total</th> & ...

phphtml

What methods can be used to control the URL and back button in a web application designed similar to an inbox in Gmail?

Similar Question: Exploring AJAX Techniques in Github's Source Browser In my application, there are essentially 2 main pages: The main page displays a list of applications (similar to an inbox) The single application page is packed with various ...

javascriptjqueryhtmlajax

Using NodeJS to fetch external page data and return Javascript variable information

I need to retrieve the entire DOM of a specific page by sending a request, essentially crawling the website. The HTML directly includes a variable with some data, instead of it being in a separate script file. With my NodeJS backend, I am utilizing request ...

javascripthtmlnode.js

Suggestions for creating a simple implementation of a 3 x 3 cell layout with a large center using flexbox are

Creating a grid layout like this 3 x 3 cell with large center using CSS Grid is quite straightforward. .container { display: grid; grid-template-columns: 60px 1fr 60px; grid-template-rows: 60px 1fr 60px; } But what if we wanted to achieve the same ...

cssflexbox

Experiencing difficulty moving information from React form to DATA.txt file through Express

I've tried various things, but I keep encountering the same error. Changing the file path didn't seem to make a difference. The current structure of my project is as follows: {nodemodules,public,scr (containing all files including App.jsx),DATA. ...

javascripthtmlreactjsnode.jsexpress

Disallow negative numbers but allow decimals in HTML input

I need help restricting user input to prevent negative numbers while still allowing floating point numbers in my Angular project. Any suggestions using Angular tools would be greatly appreciated. Thanks! ...

htmlangular