Navigational inconsistency with SVG icons integrated into Bootstrap Navbar

Bootstrap offers icons in embedded SVG format. These SVG tags can be directly added to HTML code. However, when I included the SVG tag in my navbar, the icon did not appear centered even after using the vertical-align: middle CSS property. The icon did not seem to be properly aligned. On the other hand, when I used an icon from FontAwesome, it appeared perfectly centered with the correct height and width. How can I implement SVG tag icons so they align as well as FontAwesome icons?https://i.sstatic.net/E09AI.png

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/home.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <title>Unravel-Instilling Hope</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02726d727267702c687142332c33345b632e2c33">[email protected]</a>/dist/umd/popper.minjs" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="">tindog</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item">
          <a class="nav-link" href="">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">Pricing</a>
        </li>
                  <li class="nav-item">
          <a class="nav-link" href="">
            <i>
              <svg style="display:block;" width="2em" height="1em" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z" />
              </svg>
            </i>
            Download
          </a>
        </li>
      </ul>
    </div>
  </nav>
</body>
</html>

javascripthtmljquerycsstwitter-bootstrap

Answer №1

To achieve a centered display, you can include 

display: flex; align-items: center;
in the style definition of the .nav-link class.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/home.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f6d60607b7c7b7d6e7f4f3b213a213c">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <title>Unravel-Instilling Hope</title>
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80f0eff0f0e5f2aeeaf3c0b1aeb1b6aeb1">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3818c8c979097918293a3d7cdd6cdd0">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="">tindog</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="SupportedContent">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item">
          <a class="nav-link" href="">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="" style="display: flex;
align-items: center;">
            <i>
            <svg style="display:block;" width="2em" height="1em" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V 11H 6 .999a.5.5 0 0 1-.5-.5zM .86 5.387A 2.5 2.5 0 1 1 4.387 1.86A 8.035 8.035 0 1 0 .86 5.387zM 13.5 1C- -in any case!).
";)))
t/. „'
erio..,, .
ation !" 

;;
")},
""('"""

(.inin-and-tho...;.));)
.
>>() =>
Hitat<String>(">[]", ).clare.init = "ERROR'(=:: ,,(); ;) ti > >")
}}">
]));
}));
,,,,,,,,
};
`.svg{
}
}).`.
,,,,,,,,,
>>>>(),''))),
))).))((i=>{}
})();

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

Unable to retrieve the data from the ajax response container

After a successful ajax response, the following code is executed: success : function(response) { $('#texto').append(response); } Here is the HTML response that is appended: <body> {% load custom_filters %} {% for ...

jqueryajaxdjango

Issues with angular-strap popover's onBeforeShow function not functioning as expected in Angular

I am currently utilizing the angular-strap popover feature. To learn more about it, visit According to the documentation, when an onBeforeShow function is provided, it should be called before the popover is displayed. However, I am experiencing issues wit ...

javascriptangularjspopoverangular-strap

json array: Tips for adding elements to a new array

In order to achieve my goal, I am looking to create a JSON array structure similar to the one shown below: var args = [{ name: 'test', value: 1 }, { key: 'test2', value: 2}]; How can I modify the code snippet provided below to generat ...

javascriptajaxjson

Having trouble accessing the root route in production environment

After creating a basic Node application with 5 routes that serve different HTML documents, I encountered an issue. While all the routes function properly when running on localhost, in production my root route displays a 404 error page, indicating that the ...

javascriptnode.js.htaccessexpressroutes

Retrieve a specific item from a Database ListView in Django

I'm currently working on a project where I have a class that includes a django ListView. The issue I am facing is that when accessing my database items through this ListView, it loads all the entries. What if I only need to access one specific entry, ...

pythonhtmldjangodjango-modelsdjango-views

PM2 continuously restarting KeystoneJS application in a loop

My keystonejs application is successfully clustered using throng, but I am encountering an issue when running the following code: const throng = require("throng"), dotenv = require('dotenv'); (function usedotenv() { try { dote ...

javascriptnode.jsexpresspm2keystonejs

Navigating through pages in a server component using Next.js

I am currently working on a project that involves implementing pagination using the NextJS 13 server component without relying on the use client. The goal is to ensure that when a button is clicked, new entries are added to the screen in a sequential order ...

javascriptreactjsnext.js

I am looking to reposition the navbar span tag so that it appears beneath the icon, utilizing both HTML and CSS

I'm currently working on a navbar design with 5 items, each containing an icon and a span tag. However, I'm facing difficulties in aligning the span tag below the icon for all 5 items in the navbar. Despite my best efforts, I have been unable to ...

htmlcss

Load Bootstrap 4 Modal with Ajax

I recently upgraded from Bootstrap 3 to Bootstrap 4.1 Within my applications, I utilize ajax loaded modals. In the layout, I have: <div class="modal fade" id="myModalToFillInfo" tabindex="-1" role="dialog" aria-labelledby="myModalToFillInfoLabel" ari ...

javascriptjqueryhtmlajaxbootstrap-4

Encountering an Axios Error 404 while attempting to save my information to the MongoDB database

I am encountering an Axios error 404 when trying to register details in a MongoDB database. The error message I am getting is - "Failed to load resource: the server responded with a status of 404 (Not Found)." You can view the Error 404 Image for reference ...

javascriptreactjsmongodbaxios

Instead of logging an "Error" message along with a stack trace, log a "Warning"

If I were to utilize new Error() or new TypeError(), the resultant stack trace would resemble the following: Error: Live-Mutex client lock request timed out after 6000ms I am curious if there exists a method to create a message that commences with "Warni ...

javascriptnode.js

Encountering difficulty in retrieving data from an unidentified JSON array using Javascript

Exploring the realm of Javascript and JSON, I find myself faced with a challenge - accessing values in an unnamed JSON array. Unfortunately, as this is not my JSON file, renaming the array is out of the question. Here's a snippet of the JSON Code: [ ...

javascriptarraysjsonajax

Retrieving the latest iteration of array object attributes and filling in form fields

My goal is to iterate through a data object using ng-repeat: <tbody data-ng-repeat="(contractIndex, contract) in contracts"> {{contracts}} <tr> <td class="col-md-4"> <div class="dropdown" style="width:100% ...

angularjshtml

The value of This.state is found to be zero while being used inside the

I am attempting to convert all selected item IDs from a Redux store into the item names and then save them into the state. The issue I am facing is that the spread operator within the setState function results in zero. Do I need to bind the context of the ...

javascriptreactjs

Generate a Customized Modal for a Memo Capturer Program

I am currently developing a basic note-taking application using vanilla JavaScript. I want the program to add notes with a modal that displays the text when clicked. However, my current implementation adds the note below the input box and includes the moda ...

javascripthtmlcsssimplemodal

Is there a way to create a function that is able to return both a value and a promise

Assume I need to fetch a value only if an object is already present in my model. Otherwise, I should retrieve the output of an endpoint service: model.getDoohkyById = function( id ){ if( this.data ) { if( this.data.length > 0) { ...

javascriptajaxangularjspromise

Utilize Angular to organize data in a single-dimensional array

In my project, I am using Angular and Bootstrap to create a dynamic data grid where users can edit the data. The dataset consists of an array of objects, with each object containing a non-unique group property to categorize records. For example: [ { ...

javascriptangularjstwitter-bootstrap

Tips for extracting innerHTML or sub-string from all elements that have a specific class name using JavaScript

When it comes to shortening the innerHTML of an element by its Id, I have found success using either slice or substring. While I'm not entirely clear on the differences between the two methods, both accomplish what I need them to do. The code snippet ...

javascripthtml

Understanding how to set the Content-Type in a Post request using Ajax with Node.js

Attempting to send an ajax request without a header in Node.js triggers an error: { [Error: unsupported content-type] status: 415, statusCode: 415 } However, when sending a request with a header, Node.js does not seem to respond. Here is my ajax funct ...

javascriptajaxnode.js

AJAX jQuery requests can flatten arrays when they are sent

The below code shows an endpoint written in Express, using the body-parser middleware. app.post("/api/poll/new",api.NewPoll); api.NewPoll = function(req,res){ if(!req.body) return res.status(400).send("MISSING BODY"); console.log(req.body,typeof(r ...

javascriptjqueryajaxexpress