Challenges with aligning Fontawesome stacks

I utilized the code example from Fontawesome's website to create a pair of stacked social media buttons and enclosed it in a div element to float them to the right side of the page.

<div class="social-icons">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x icon-background"></i> 
<i class="fa fa-instagram fa-stack-1x fa-inverse"></i></span> 
<span class="fa-stack fa-lg"> 
<i class="fa fa-circle fa-stack-2x icon-background"></i> 
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i> 
</span>
</div>

Despite utilizing the styles from , the icon and its aligning circle seem to be positioned at the top rather than the middle of the button.

csswordpress-themingfont-awesome

Answer №1

Have you included this code snippet between your head tags?

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">

If so, then it seems like your values are incorrect.

<i class="fab fa-stack-overflow"></i>
<i class="fas fa-circle"></i>
......

Check all the available icons on the Font Awesome website. After selecting the icons you want to use, make sure to include the Font Awesome content delivery network (CDN) link:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

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

Designing hover-activated submenus and ensuring they appear at the forefront

I am currently utilizing jquery to implement a dropdown submenu on hover action. Here is the structure of the code: <div id="menucontainer"> <ul id = "topmenu"> <li><a onmouseover="javascript:show('div_1');">menu_1 ...

jqueryhtmlcss

Rules of HTML tables extend to the border size

Check out this HTML code snippet: div { border: 2px solid red; height: 50vh; width: 50vw; } table { border: 1px solid; table-layout: fixed; } <div> <table rules="cols"> <tr> <th>Name</th> < ...

htmlcsshtml-table

Adjust the position of an unordered list element in CSS to move it lower on

I have a ul element in my navigation bar at the top of the webpage that I want to adjust slightly downwards. Take a look at the current navigation bar: image To align the text with the white bar at the top of the page, I need to move it down just a bit. ...

htmlcss

Using Bootstrap to handle opening a link when a dropdown menu button is clicked

Utilizing Bootstrap in my main menu was essential for navigating through the numerous pages, subpages, and sub-subpages within my project. The dropdownmenu feature proved to be very helpful in this regard. However, my client now has a specific request - t ...

javascriptjquerycsstwitter-bootstrapdrop-down-menu

Wait for AngularJS to load when the background image of a div becomes visible

Currently, I am utilizing the ng-repeat feature to fetch data from a $http.post request and then save it to the $scope.data variable. <div ng-repeat="key in [] | range:data.pages"> <div class="pageBackground" id="page_{{ (key+1) }}" ng-style= ...

javascripthtmlcssangularjs

CSS behaving strangely with the height property

I've run into a specific issue with a div element that contains multiple buttons. I am trying to adjust the height and position of one button so that it takes up space above the other buttons, but every time I make changes to its height and position, ...

jqueryhtmlcss

Conflicting configurations in VS Code causing issues

Currently making adjustments to my JSON settings and everything is functioning correctly, however, I keep encountering this persistent error: "Expected comma jsonc(514)" Here's a snippet of my code that's causing the issue: "css.li ...

cssjsonvisual-studio-codesettings

Issues with Flexbox not being rendered correctly on Safari 5.1 for Windows

My goal is to design a straightforward box for questions, with the question number on one side and the text on the other. To ensure that the texts are aligned vertically and dynamic, I am experimenting with using flexbox. I have researched both the old an ...

htmlcssflexbox

picking out a particular set of data from a JSON document

I have a map of Europe along with a JSON file that displays the unemployment rate for each country in the year 2011. The JSON file also includes x and y elements, allowing me to place a blue circle on top of each country on the map. My goal is to be able ...

javascriptjqueryhtmlcssjson

Unusual gaps of white space appearing between React components

Currently developing a small web application with multiple components. The backend functionality is all set, but encountering an unusual styling issue. Specifically, noticing a white space appearing between each component without any clear reason. This ga ...

htmlcssreactjs

When a Grid Item is enclosed in a link, it does not extend over rows

After avoiding HTML/CSS for a long time, I finally decided to dive in and create a simple CSS grid website with 3 items in the grid. Everything was working well and looking exactly as I wanted it to: https://i.sstatic.net/zVQ9U.jpg However, I had the ide ...

htmlcsslayoutcss-grid

Activate the timepicker in Bootstrap when the user clicks on the input field

Struggling to implement a timepicker feature? Look no further than this resource. After adding the necessary js and css to your project, you may encounter issues with the popup not appearing when clicked. The code provided offers a TextBox control with s ...

javascriptjquerycsstwitter-bootstraptimepicker

Adding a class to a child component layout from a parent component in Angular 12 and Typescript can be achieved by using the ViewChild decorator

Incorporating the child component into the parent component is an important step in the structure of my project. The dashboard component serves as the child element, while the preview component acts as the parent. Within the parent (preview) component.htm ...

jquerycssangulartypescript

Is it possible to minify HTML in PHP without parsing JavaScript and CSS code?

After finding a solution in this discussion, I successfully managed to 'minify' HTML content. function process_content($buffer) { $search = array( '/\>[^\S ]+/s', // eliminate spaces after tags, except for ...

javascriptphphtmlcsspreg-replace

Struggling to align elements in a navbar using HTML and CSS?

Currently, I'm in the process of building a simple website and focusing on customizing the navbar. The logo within the navbar is created using font awesome and text, with a larger font size compared to other elements in the navbar. However, I am facin ...

htmlcss

How to create a listview with stylish rounded corners in jQuery mobile using CSS?

I'm attempting to customize the appearance of a jQuery mobile listview using CSS by adding a border radius to each item. Although things seem to be working mostly as expected, I've encountered a problem where only the first and last <li>&l ...

jquerycss

Bootstrap navigation bar collapsing horizontally instead of vertically

My Navbar is collapsing correctly, but when I click the toggle icon after it's collapsed, the items appear in a horizontal row instead of the intended vertical block. I have checked the code on the Bootstrap 5 example page and tried to replicate it, b ...

htmlcsstwitter-bootstrapbootstrap-5

Is there a way to incorporate jQuery into SharePoint 2010?

I am encountering an issue with linking my HTML page to our organization's SharePoint 2010 portal. All necessary files (CSS, images, jQuery) are stored in the same document library. While the CSS is functioning properly, I am facing challenges with ge ...

javascriptjqueryhtmlcsssharepoint

Sections overlap, extending the content beyond their designated boundaries

I am facing an issue where the header in the first section remains fixed as an attachment, but when I resize the browser window, the background only covers a small portion of the section. The rest of the content either goes under another section or complet ...

htmlcssviewpositioningclearfix

Is there a way to align both the horizontal and rotated lines to intersect at a common point in HTML and CSS?

As a beginner, I'm looking to create a structure resembling a thigh, leg, and ankle using thick lines. My aim is to rotate them with animation, ensuring that the joints between the lines mimic those of a knee joint and hip joint. Below is the code sn ...

htmlcssweb