Creating rounded buttons with Font Awesome icons and hover effects

I am currently working on creating buttons similar to the design shown in the image below.

https://i.sstatic.net/hMqHs.png

I have utilized stacked Font Awesome icons to place the icons atop a circle, resulting in this look:

https://i.sstatic.net/rtEkP.png

(Please disregard the faint gray line at the bottom caused by suboptimal screenshotting.)

Upon close inspection, you can notice that the icons are slightly misaligned. My goal is to adjust their position to ensure better vertical alignment within the circles by either enlarging the circles or scaling down the icons for improved padding like in the example provided. Additionally, I aim to change the color of the circles, a task with which I require some guidance, and implement hover effects such as switching the icon color to white.

Below is the snippet of code I am using for reference.

.footer {
  position: absolute;
  bottom: 0;
  height: 50px;
  background-color: #C0C0C0;
  width: 100%;
}
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  crossorigin="anonymous"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<div class="row footer">
  <!-- FOOTER -->
  <div class="col-md-4"></div>
  <div class="col-md-4 text-center" id="copyright">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
    </span>

    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-envelope-o fa-stack-1x fa-inverse" aria-hidden="true"></i>
    </span>
  </div>
</div>

htmlcsstwitter-bootstrap-3font-awesome

Answer №1

To solve the initial issue, you have the option of utilizing CSS line-height

span.fa-stack {
  line-height: 37px;
}

In terms of the second problem, you can add font-size to FA icons by implementing the following code:

span.fa-stack > i:nth-of-type(2) {
  font-size: 13px; /* Or any suitable value */
}

If desired, another approach would be to utilize transform: scale(); once more:

span.fa-stack > i:nth-of-type(2) {
  transform: scale(0.8); /* Or any appropriate value */
}

For the :hover effect, consider using transform: scale(), which I believe offers a nice hover effect in conjunction with cursor: pointer;:

span.fa-stack:hover {
  transform: scale(1.3); /* Or any suitable value */
  cursor: pointer;
}

Finally, to apply color to the circle, a simple solution is presented here:

span.fa-stack:nth-of-type(1) {
  color: #2D79AF; /* Or any appealing color */
}


.footer {
  position: fixed;
  bottom: 0;
  height: 50px;
  background-color: #C0C0C0;
  width: 100%;
  display: table;
  align-items: center;
}
span.fa-stack:hover {
  transform: scale(1.3);
  cursor: pointer;
}
span.fa-stack {
  line-height: 36px;
}
span.fa-stack:nth-of-type(1) {
  color: #2D79AF;
}
span.fa-stack > i:nth-of-type(2) {
  font-size: 14px;
}
#copyright {
  padding-top: 6px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row footer">
<!-- FOOTER -->
  <div class="col-md-4"></div>
  <div class="col-md-4 text-center" id="copyright">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
    </span>
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-envelope-o fa-stack-1x fa-inverse" aria-hidden="true"></i>
    </span>
  </div>
</div>

The symbols essentially function as textual content.

Answer №2

The symbols on the icons can be customized just like regular text characters.

You can adjust them by including code like this:

.icon-linkedin, .icon-envelope {
  font-size:12px;  
}
.icon-circle {color:red;}

Instead of directly modifying the awesome fonts CSS, it's recommended to create your own class for the icons as shown in this example.

Answer №3

To adjust the position of the icons manually, you must first create a black background separately and then place the icons inside it.

The recommended approach would be to use ul li as shown below:

<ul class="social_icon">    
     <li>
        <a href="https://www.facebook.com/xxxxxxx" class="facebook">
          <i class="fa fa-facebook"></i>
        </a>
     </li>
     <li>
        <a href="https://twitter.com/xxxxxx" class="twitter">
          <i class="fa fa-twitter"></i>
        </a>
     </li>
     <li>
        <a href="https://in.linkedin.com/xxxxxxxx" class="linkedin">
          <i class="fa fa-linkedin"></i>
        </a>
     </li> 
     <li>
        <a href="mailTo:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="107d71797c50686868686868686868683e737f7d">[email protected]</a>" class="email">
           <i class="fa fa-envelope"></i>
        </a>
     </li> 
</ul>

The CSS code for styling would look something like this:

.social_icon {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
    width: 100%;
}

.social_icon li {
    width: 38px;
    height: 38px;
    background: black;
    border-radius: 100%;
    margin-right: 10px;
    line-height: 40px;
    text-align: center;
    display: inline-block;
}

.facebook i {
    position: relative;
    top: xx;
}

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

Customize the text displayed on the select box button in a React application

My task involves working with an array of JSON objects structured like this - [ { "country_code": "AF", "country_name": "Afghanistan", "country_flag": " ...

javascripthtmlreactjsselectdrop-down-menu

Does the 'span' element negatively impact the vertical alignment of text?

While working on my code, I noticed an issue with vertical alignment when using span tags to change the background of the text based on its content. The problem occurs specifically when viewing the code in the Android Chrome browser. You can view the initi ...

htmlcsstext-alignmenttext-align

Issue with CSS not appearing in Google Chrome's coverage tab

As I delve into analyzing the extent of unused CSS on my webpage, I encounter a challenge. The webpage is crafted in Angular 7, with CSS incorporated through the angular.json build configuration. The css appears to be added to the head of the html file, e ...

cssangulargoogle-chromegoogle-chrome-devtoolscode-coverage

Is it possible to add additional text to an input field without modifying its existing value?

I have a numerical input field labeled "days" that I want to add the text " days" to without altering the actual numerical value displayed. <input type="number" class="days" (keyup)="valueChanged($event)"/> Users should only be able to edit the num ...

htmlcsstypescriptinput

"Despite using the same CSS and HTML code, the fonts appear distinct from each

Feeling lost here, not understanding what's going on. I made changes in Elementor on my first PC and later noticed that the font looked a bit different. I tried to revert the changes but had no luck. I also work on my second PC where the browser showe ...

htmlcssfonts

Extracting data from a tiered website within a specialized niche

I am currently attempting to scrape data from the webpage: "https://esco.ec.europa.eu/en/classification/skill_main". Specifically, I want to click on all the plus buttons under S-skills until no more plus buttons can be found, and then save the page source ...

pythonhtmlselenium-webdriverweb-scraping

Integrating AJAX functionality into a PHP webpage with various options selected

I'm a beginner coder looking for some assistance. Currently, I have a page with four select inputs, each with two options. When all selections are made and the submit button is clicked, a specific song out of 16 based on the choices will play in an a ...

phphtmlajaxformsselect

PHP experiencing issues when trying to save data to MySQL database

I'm currently facing an issue with my HTML page that contains input fields. I'm using PHP to validate the data and insert it into my MySQL Database named 'fantasymock'. Despite successful validation, the data does not get written into t ...

phphtmlmysqldatabase

Tips for displaying two dynamic variables that are interdependent

For instance: Controller: AllBooks[{ book1:{ hardcover{price:25.99},e-book{price:1.99} } }, book2:{ hardcover{price:60.00},e-book{price:2.99} }]; $scope.bookchoice = function(selectedBook) { $rootScope.choice = selectedBook;} $scope.booktype = functio ...

javascripthtmlangularjsionic-framework

Executing raml2html within an ANT automation script

I have a collection of RAML files stored in a specific folder, and I'm in the process of configuring an ANT script to "generate" them into HTML documentation utilizing the raml2html package which is highlighted on the raml.org website. While my expe ...

htmlantbuildraml

What is the process for right-aligning components in BootStrap 5.0?

Currently, I am enrolled in an online course where the instructor utilizes Bootstrap 4. However, I decided to challenge myself by using Bootstrap 5.1 instead. I have been struggling with configuring my navigation bar elements to look like the ordered list ...

htmlcsstwitter-bootstrap

Personalized parallax design

I am in the process of developing my own custom parallax plugin to allow me to control the direction in which items transition off the screen. However, I am currently facing a challenge in ensuring that regardless of how a user scrolls or the size of the w ...

javascriptjqueryhtmljquery-effectsparallax

conceal the HTML code from the students

As an instructor of an HTML/CSS course, I often assign tasks that require students to replicate the design of a webpage. However, providing them with direct links to the page makes it easy for them to decipher my methods and simply copy the work. Furthermo ...

htmlcsspdf

Displaying text on an image when hovering over it

I have tried various solutions that I came across, but none of them have been successful so far. My goal is to display dynamic text over an image when the user hovers over it. Additionally, I would like to change the hover color. Currently, the text is alw ...

htmlcsshover

Guide on transforming the popup hover state into the active state in vue.js through a click event

My code currently includes a popup menu that shows up when I hover over the icon. However, I need to adjust it so that the popup changes its state from hover to active. Intended behavior: When I click the icon, the popup should appear and then disappear w ...

javascriptcssvue.js

The CSS opacity property fails to function properly on Google Chrome

While it is functioning correctly on Firefox, there seems to be an issue with Chrome. I am attempting to have a card apply the opacity property when hovered over. Here is the HTML file: <div class="col mb-4"> <a class="text ...

htmlcssgoogle-chromebootstrap-4

Difficulty in breaking text within flexbox styling

I'm facing an issue where the text inside a flex container does not break correctly when the horizontal space is too small to display it all. But shouldn't it still not break even in the "normal" state? What mistake have I made here? (functio ...

htmlcssflexbox

Concealing the text input cursor (caret) from peeking through overlaid elements on Internet Explorer

Currently, I am facing an issue with a form that includes a unique widget. This particular widget automatically populates a text input when it is in focus. The problem arises when the widget appears above the text input as intended. In Internet Explorer ...

javascripthtmlcssinternet-explorerdom

How to vertically align Bootstrap5 buttons on mobile devices

I'm currently developing a web application and I'm facing an issue with centering two bootstrap buttons next to each other on mobile devices. While it works fine on the computer, when I inspect the page on a mobile device, the buttons stack verti ...

htmlcssbootstrap-5

Center the image to always align with the text

I am looking to display an image alongside some text, where the number of text lines can vary. It could be one, two, or three lines of text. Here's how it should be handled: If there is only one line of text: The image should be centered with the te ...

htmlcss