In my attempt to position Font Awesome icons alongside a button icon and create equal spacing between them, I want to achieve the layout displayed in the example

How can I align Social Icons using Font Awesome like in the example provided below? I've tried targeting the Icons but I can't seem to adjust the padding or margin. What am I overlooking?

- EXAMPLE 

<!--BOOTSTRAP-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07776877776275296d7447362936312937">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- FONT AWESOME -->
<script src="https://kit.fontawesome.com/919f10952e.js" crossorigin="anonymous"></script>


<!-- NAVBAR -->
<nav class="navbar">
  <div class="container-fluid">
    <a class="navbar-brand" href="#" style="margin-left:0px; padding-top: 0px;">Davidos</a>
    <ul class="nav justify-content-center" style="padding-top:5px;">
      <li class="nav-item">
        <a href="#" class="nav-link">HOME</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">ABOUT</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">MENU</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">GALLERY</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">BLOG</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">CONTACT</a>
      </li>
    </ul>
    <!-- SOCIAL LINKS -->
    <ul class="nav justify-content-end" id="socials">
      <li class="nav-item"><i class="fab fa-facebook-f"></i>
      </li>
      <li class="nav-item"><i class="fab fa-twitter"></i>
      </li>
      <li class="nav-item"><i class="fab fa-instagram"></i>
      </li>
      <li>
        <button type="button" class="btn btn-danger">MAKE A ORDER</button>
      </li>
    </ul>
  </div>
</nav>

<div class="container">
  <h1>Davidos Pizza and Wing's</h1>

</div>

htmlcssbootstrap-4

Answer №1

.fab{
margin-right:25px;
}
<!--BOOTSTRAP-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1b1aeb1b1a4b3efabb281f0eff0f7eff1">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- FONT AWESOME -->
<script src="https://kit.fontawesome.com/919f10952e.js" crossorigin="anonymous"></script>


<!-- NAVBAR -->
<nav class="navbar">
  <div class="container-fluid">
    <a class="navbar-brand" href="#" style="margin-left:0px; padding-top: 0px;">Davidos</a>
    <ul class="nav justify-content-center" style="padding-top:5px;">
      <li class="nav-item">
        <a href="#" class="nav-link">HOME</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">ABOUT</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">MENU</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">GALLERY</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">BLOG</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">CONTACT</a>
      </li>
    </ul>
    <!-- SOCIAL LINKS -->
    <ul class="nav justify-content-end" id="socials">
      <li class="nav-item"><i class="fab fa-facebook-f"></i>
      </li>
      <li class="nav-item"><i class="fab fa-twitter"></i>
      </li>
      <li class="nav-item"><i class="fab fa-instagram"></i>
      </li>
      <li>
        <button type="button" class="btn btn-danger">MAKE A ORDER</button>
      </li>
    </ul>
  </div>
</nav>

<div class="container">
  <h1>Davidos Pizza and Wing's</h1>

</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

Why is the CSS not correctly linked to the index.html file?

Currently, I am working on a project involving a "is it newyear page" that should provide a simple yes or no answer. While the functionality of the page is not the issue, I am facing a problem with the link placement. I have included a link inside the < ...

cssdjango

Steps to switch the displayed ionicon when the menu is toggled

My goal is to display the 'menu-outline' ionicon on my website until it is clicked, at which point the icon will change to 'close-outline' and vice versa. I am utilizing jQuery for this functionality. Although I am aware of how to togg ...

javascripthtmljquerycss

Send form information using AJAX response

I have successfully implemented a feature where I load an iframe into a div with the id of #output using AJAX. This allows me to play videos on my website. jQuery( document ).ready( function( $ ) { $( '.play_next' ).on('click', fun ...

javascriptjqueryhtmlajaxforms

A guide to deactivating the Material UI Link API element

Previously, I relied on Material UI's Button component with a disable property that allowed the button to be disabled based on a boolean value. However, I now want to use the Material UI Link component, which resembles a text link but functions like a ...

javascriptcssreactjsmaterial-ui

Safari not fully supporting CSS translate functionality

When I click a button on my app, an element slides into view and then slides out when I click the button again. This is achieved using a combination of CSS and JS. It works perfectly in Chrome and Firefox, but only partially in Safari. In Safari, the elem ...

csssafaricss-transitionscss-transforms

I receive an [object HTMLCollection] as the output

I am currently working on recreating a login page and I want it so that when the button is clicked, it displays the name you entered, but instead, it returns [object HTMLCollection]. My expectation was to have the name displayed as entered. var nombre ...

javascripthtmlcssbutton

What is the method for inserting a new <p> tag whenever a user sends a new message in ReactJS?

Whenever I press the Enter key, the content is updated in the same tag. First I sent Hello World! The second time I tried to send Hello as a new message, it was updated within the same tag. I have shared code snippets related to the messaging function ...

javascripthtmlreactjs

Customizing Row Background Color in Bootstrap

Currently working on a project www.codepen.io/anon/pen/yMmjZb The problem I am facing is with my 3rd row (the one with the 3 columns) where the background color is bleeding beyond the intended boundary. My suspicion is that it's due to the row span ...

htmlcsstwitter-bootstrap

Tips for toggling the visibility of a flexbox-styled popup using jQuery

I am trying to implement a popup on my website and I want to use flexbox styling for it. I have the necessary scss mixins for flexbox properties, however, I encountered an issue. The problem arises when I try to hide the popup using display: none, as the ...

javascriptjqueryhtmlcssflexbox

Using jQuery .css({}) is not causing negative margin to function as expected

$('#thankYouMessage').css({"height": textHeight, "margin-top:": "-52px", "padding-left": "19px"}); The CSS property 'padding-left:' will be applied as expected, but the negative margin will not take effect. The 'margin-top:' ...

javascriptjquerycss

Ways to prevent a div from loading an HTML page

When an external button is clicked, the remove() function on id main is triggered. The issue arises when a user quickly clicks on btn1 and then presses the external button, causing the removal to occur before the event handler for btn1. This results in the ...

javascriptjqueryhtmlajax

Trying to dynamically filter table cells in real time using HTML and jQuery

During my search on Stack Overflow, I successfully implemented a real-time row filtering feature. However, I now require more specificity in my filtering process. Currently, the code I am using is as follows: HTML: <input type="text" id="search" place ...

javascriptjqueryhtmlfilter

Choose an element at random

I am trying to figure out how to select all div elements with the same class of "dot" under a parent div in JavaScript. Here is an example structure: <div id="dots"> <div class="dot"> . </div> <div class="dot"> . </div> ...

javascripthtmlcss

How can a table row be connected to a different frame?

I am currently incorporating jQuery into my project and I would like to have the table row link redirect to a different target frame. Here is the HTML for the table row: <tr data-href="home.html" target="content"><td><h3><center>H ...

jqueryhtml

Integrating information from various sources to create a cohesive online platform

I am looking to incorporate data from various sources into a single web page: Social networks (Facebook, Twitter, LinkedIn, etc.) RSS feeds Article meta tags (particularly OpenGraph and Twitter cards) This data may change dynamically based on user inter ...

javascripthtmlfrontend

Storing a MySQL query result in a global array in a Node.js environment

Just diving into the world of Node.js and Express, I'm trying to wrap my head around asynchronous functions and global variables. Specifically, I'm working on connecting to a MySQL database, fetching query results, and displaying them on a test.h ...

javascripthtmlmysqlnode.jsexpress

Django's background image remains static regardless of CSS changes

I recently downloaded an HTML template and am attempting to customize it by changing the background image within the CSS file. The current code in the CSS file is as follows: background: url(../img/background.jpg) Despite my efforts to replace it with t ...

pythoncssdjangopython-3.xstatic

How can a button be linked directly to a particular list item?

I currently have a HTML tag within my React application that looks something like this: <ul> <li> Item 1 <button> Delete </button> </li> <li> Item 2 <button> ...

javascripthtmlreactjs

I'm curious about something I noticed in an HTML example within the text content section of elements. Can you help clarify this for me?

I recently came across a repository that was part of a bootcamp curriculum for learning full stack development. In one of the lessons on jQuery, students were tasked with building a calculator. However, I noticed some strange variables in the HTML where te ...

javascripthtmljquerycss

Webpack is failing to recognize certain CSS files

My development stack includes Vue.js 2.5.15, Webpack 4.12.0, css-loader 0.28.11, ASP.Net Core 2.1 in Visual Studio 2017. Starting with the Visual Studio asp.net core template project for Vue and Typescript, I prefer to have individual small CSS files with ...

csstypescriptwebpackvue.jscss-loader