Rotating Social Media Symbols - bootstrap 4

I am looking to incorporate a Social Button Footer similar to the one in this CodePen example: (https://codepen.io/vpdemo/pen/WbMNJv). However, my buttons are not appearing as circles. How can I rectify this?

 a, a:hover {
text-decoration: none;
}

.socialbtns, .socialbtns ul, .socialbtns li {
margin: 0;
padding: 5px;
}

.socialbtns li {
    list-style: none outside none;
    display: inline-block;
}

.socialbtns .fa {
    color: #FFF;
background-color: #000;
width: 40px;
    height: 28px;
    padding-top: 12px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
  transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
  transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
}

.socialbtns .fa:hover {
transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Website Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

</head>
<body>

<br/>
<div align="center" class="socialbtns">
<ul>
<li><a href="#" class="fa fa-lg fa-facebook"></a></li>
<li><a href="#" class="fa fa-lg fa-twitter"></a></li>
<li><a href="#" class="fa fa-lg fa-google-plus"></a></li>
<li><a href="#" class="fa fa-lg fa-github"></a></li>
<li><a href="#" class="fa fa-lg fa-pinterest"></a></li>
<li><a href="#" class="fa fa-lg fa-linkedin"></a></li>
<li><a href="#" class="fa fa-lg fa-instagram"></a></li>
<li><a href="#" class="fa fa-lg fa-youtube"></a></li>
</ul>
</div>

</body>
</html>

htmlcssbootstrap-4

Answer №1

After making some adjustments, I focused on the height element, which was the main issue. height: 40px;

 a, a:hover {
text-decoration: none;
}

.socialbtns, .socialbtns ul, .socialbtns li {
margin: 0;
padding: 5px;
}

.socialbtns li {
    list-style: none outside none;
    display: inline-block;
}

.socialbtns .fa {
    color: #FFF;
background-color: #000;
width: 40px;
    height: 40px;
    padding-top: 12px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
  transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
  transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
}

.socialbtns .fa:hover {
transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Website Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

</head>
<body>

<br/>
<div align="center" class="socialbtns">
<ul>
<li><a href="#" class="fa fa-lg fa-facebook"></a></li>
<li><a href="#" class="fa fa-lg fa-twitter"></a></li>
<li><a href="#" class="fa fa-lg fa-google-plus"></a></li>
<li><a href="#" class="fa fa-lg fa-github"></a></li>
<li><a href="#" class="fa fa-lg fa-pinterest"></a></li>
<li><a href="#" class="fa fa-lg fa-linkedin"></a></li>
<li><a href="#" class="fa fa-lg fa-instagram"></a></li>
<li><a href="#" class="fa fa-lg fa-youtube"></a></li>
</ul>
</div>

</body>
</html>

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

jquery form submission issue unresolved

I am currently utilizing jQuery version 1.10.1 and here is a snippet of my HTML code: <li> <a href='' id='logout'>Log Out</a></li> <form id='logout_form' method='post'> <i ...

jqueryhtmlform-submit

Encountering an issue stating "The element is not visible at the moment, therefore cannot be interacted with" while trying to access a text box within a window opened via an ajax call

Currently, I am working on a Selenium script using Java to automate a specific process. However, I have encountered an issue where clicking on a dropdown causes a hidden popup to appear through an ajax call. Unfortunately, when attempting to interact with ...

htmlajaxselenium

Implementing the Upload Feature using AngularJS

Currently, I'm facing a challenge in implementing an upload button on my webpage using AngularJS and Bootstrap. Specifically, I am having trouble assigning the (upload) function to that button in AngularJS. The goal is for the button to enable users t ...

javascripthtmlcssangularjs

I'm encountering an undefined JavaScript variable, how should I proceed?

$(function(){ //Location was "set". Perform actions. $("#geocodesubmit").click(function(){ var geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': address}, function(results, status) { if (status ...

javascriptjqueryhtmlcssgoogle-maps

Incorporating JavaScript unit tests into an established website

I am facing a challenge with testing my JavaScript functions in the context of a specific webpage. These functions are tightly integrated with the UI elements on the page, so I need to be able to unit-test the entire webpage and not just the functions them ...

javascripthtmlunit-testing

What are the steps to separate Bootstrap 5 from other frameworks?

Is there a way to apply bootstrap-5 styles only to a specific block or page? Can someone provide guidance on isolating bootstrap 5 either for the entire page or in a specific area? ...

htmlsasslessbootstrap-5

What could be the reason for the bottom edge of my central diagonal image having a darker border?

I can't figure out why the border on the bottom edge of my image is darker. You can check out the demo here. To get a closer look at the issue, you can open a software like GIMP and zoom in on the following image to see the difference in values: http ...

javascripthtmlcssreactjsimage

Borders in my CSS/HTML table design

Hey, I'm currently facing an issue with my class project. I've created a table with a series of images to form a background image. However, there are borders on the table that I need to adjust. Here is the current look: I am trying to have a sq ...

htmlcss

Dragging and arranging elements outside the main container is possible with drag-and

Imagine we have a div grid for an inventory that is 128x512px. I am looking to make all the (item 64x64px) divs draggable so they can be snapped onto the grid by dragging them. Inside the inventory, the divs must also be sortable without the use of lists ...

jqueryhtmljquery-ui-sortabledrag

Customize YouTube iframe styles in Angular 4+ with TypeScript

Has anyone been successful in overriding the style of an embedded YouTube iframe using Angular 4+ with TypeScript? I've attempted to override a CSS class of the embed iframe, but have not had any luck. Here is the URL to YouTube's stylesheet: ...

javascriptcssangulartypescriptangular5

Leverage Html5 to open and retrieve data from an Excel document

Is there a method to access excel file data using HTML5 while uploading the file on the client side? I have come across the use of reader in JavaScript, but unsure how it can be helpful in this scenario. Is there a way to read excel file data seamlessly ...

javascripthtmlmeteor

What is the best way to capture user input using an onClick event in JavaScript and then display it on the screen?

I'm in the process of upgrading a table, and while most of it is working fine, there is one function that's giving me trouble. I want this function to return an input with an inline onClick event. The actual return value is displaying correctly, ...

javascriptjqueryhtmldatatables

Is there a way to create a dynamic associative array using jquery?

I am looking to create an array structured like the following:- arr[0][from] = value arr[0][to] = value arr[1][from] = value arr[1][to] = value . . And so forth. I have input array html elements for the from & to fields. <input type="text" name ...

javascriptjqueryhtmlarrays

Extract following text using beautiful soup

I am attempting to extract the complete address from the given HTML code snippet. html_text = "" <div><h2 class="rounded">Address</h2><div class="textwidget"><p>30 Dov Hoz<br /> Kiryat Ono&l ...

pythonhtmlweb-scrapingbeautifulsoup

Exploring JqueryUI tab navigation with the help of the <a> tag

I have come across several articles mentioning the possibility of navigating JqueryUI tabs using a button or anchor tag. Here is the method I am currently using: $("#vtabs").tabs(); $("#tabsinner").tabs(); $(".changeTab").click(function() { alert("as ...

javascriptjqueryhtmljquery-ui

If a specific class is identified, add a border to the div when clicked using JavaScript

Is there a way to use javascript/jquery to add a border to a selected div? I have multiple rows with columns, and I want only one column per row to be highlighted with a border when clicked. Each row should have one column with a border, so it's clear ...

javascriptjquerycssborderaddition

Adjusting a Form Input Field

There seems to be an issue with the text alignment in my submission form input field, as the text appears a few pixels too low. This is causing certain letters like y, q, and j to bleed below the box in Chrome and only partially show in IE 8. To fix this p ...

htmlcss

What is the best way to adjust the background color of Material UI's theme based on different screen sizes?

Having trouble replacing hard-coded CSS breakpoints with Material UI theme settings. @media screen and (min-width: 0px) and (max-width: 400px) { body { background-color: red; } } @media screen and (min-width: 401px) and (max-width: 599px) { body { ...

cssreactjsmaterial-ui

Ways to prevent an empty iframe from triggering a load event upon injection

I have implemented a technique where I am using an empty frame to handle pseudo-asynchronous form submission. This involves referencing the frame's name attribute in the form's target attribute, allowing the form's action URI to resolve in t ...

javascripthtmljquerydomjquery-events

When opening a dialog at the bottom of the page, the window will automatically scroll to the top

I'm encountering an issue with a page that has a width exceeding 100% (2000px). Whenever I click to display a dialog from a button located at the end of the horizontal page, the window automatically scrolls back to the beginning of the page before sho ...

javascripthtmlcssangularjsangular-material