I'm attempting to include a home glyphicon in my navigation bar using a bootstrap class. Unfortunately, it doesn't appear on the output page. Any suggestions for resolving this issue?

I'm having trouble adding a home icon using Bootstrap glyphicon; it's not appearing in the output. Can someone assist me with this?

I've already attempted to increase the font size and change the font color, but neither solution worked.

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
     <a class="nav-link" href="#"><span class="glyphicon glyphicon-home"></span></a>
</nav>
</body>
javascripthtmlcssbootstrap-4

Answer №1

Bootstrap 4 no longer supports glyphicons.

However, you can still add them manually by using the following code:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Answer №2

It seems like this question may be a duplicate of Can we incorporate glyphicons in Bootstrap 4?.

In summary, the support for Bootstrap 4 has been discontinued.

For a functional example, check out this CodePen

Changes:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

Hopefully, this information was beneficial to you.

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

What is the best way to retrieve the ID of a post request using React's axios hook?

My goal is to make a post request to create an app, and then establish its links. To achieve this, I need to obtain the id of the newly created items in order to create the links. Is there a way to retrieve the id of the item created through the post reque ...

javascriptreactjsaxiosreact-hooks

Is it possible for the NextJS Client component to only receive props after rendering props.children?

Encountering a puzzling issue that has me stumped... In my setup, I have a server side component that fetches data and then sends it over to the client component, which is all pretty standard. Here's where things get weird... When I log the data on ...

javascriptreactjsnext.jsapp-router

Ways to manage the gap among flex items

I'm currently going through some educational material on Codeacademy, and I'm curious about how I can control the spacing between the "locations" text and the three divs below it. The task requires me to create a 15px gap between them, but I am u ...

cssflexbox

Intellisense does not include a form-horizontal option in its list of items

Currently using Visual Studio 2016 and have downloaded Bootstrap 4.1.3 for my project. I created two folders named css and js within the project directory. I linked bootstrap.css to the header of an HTML page in my project. However, when trying to add a fo ...

asp.nettwitter-bootstrapbootstrap-4

DIV collapsing in reverse order from the bottom to the top

Looking for some help on how to create two links that, when clicked, will scroll a hidden <div> up to fill the full height of its parent container. I've been having trouble with the element using the full height of the <BODY> instead. ...

jqueryhtmlcss

Initiating an AJAX request to a JSP file

Attempting to make an ajax call to a jsp page as shown below: $(document).ready(function () { $('#photo').photobooth().on("image", function (event, dataUrl) { alert(dataUrl); //alert($('#mygroupuserid')); ...

javascriptajaxjsp

Expand the width of navbar buttons to match the width of a container

Currently, I am immersing myself in learning navigation bars and dropdowns using only HTML & CSS. However, I have run into a problem where I am unable to fill the buttons to the length of a container. I attempted to utilize flexbox but unfortunately, that ...

htmlcssnavigation

Is there a way in JavaScript to disable a function's functionality?

I am dealing with a function that includes an if statement and an onclick function. My goal is to prevent the entire function from running if the if statement evaluates to true. I have attempted using return false, but it did not yield the desired outcom ...

javascriptecmascript-6vue.jsfrontend

Is the Bootstrap carousel floating outside the document's natural order?

As I work on building a landing page for a new startup, I encountered an issue with the layout. I am using a carousel in the "hero section," and everything seemed to be working fine until I attempted to add the next section. To my surprise, the next sectio ...

htmlcsstwitter-bootstrapbootstrap-4

Tips on obtaining the screen resolution and storing it in a PHP variable

Hey there! I've run into a bit of a roadblock that I'm struggling to overcome. I know that I need to incorporate some JavaScript to solve this issue, but I'm having trouble grasping how to do so. Here's the script I'm working with: ...

phpjavascriptjqueryscreen

Understanding the implementation of public and private methods in mixins in Vue2

While I've come across documentation on the following implementation, I find myself struggling to visualize how it can be executed. // A more advanced alternative! var myGreatMixin = { // ... methods: { publicMethod() { // ... myPr ...

javascriptvue.jsvuejs2namespacesmixins

Error: When trying to run npm start in a React project, an issue arises where the property 'prototype' is undefined and results in

Having trouble while running my react app, I am encountering an issue. Can someone please assist me with this? A TypeError is showing up: "Cannot read property 'prototype' of undefined". This error is displayed on the browser page. The terminal o ...

javascriptnode.jsreactjs

Tips for altering the text color of the highlighted row in a Material UI table

Trying to modify the color of the row text and the background color when selected. I have managed to adjust the background color, but I am encountering difficulty changing the text color. <TableRow className={classes.tableBody} > tab ...

cssreactjsmaterial-uifrontend

Having trouble with individuals gaining access to my gh-pages on Github

After creating a gh-pages repository on Github to showcase my portfolio, I encountered an issue where visitors were being prompted to log into Github in order to view the page. Gh-pages are intended to be public, so I am unsure why this is occurring. My ...

htmlcssgithostinggithub-pages

Enhance your WordPress site by implementing infinite scroll with AJAX to seamlessly load more posts

Currently, I have implemented a feature that loads more posts through AJAX when the user clicks on a 'load more' button. The code I utilized is based on a tutorial found at this link. My goal now is to enhance this functionality so that instead ...

javascriptjqueryajaxwordpress

Guide on adjusting the darkness of a MaterialUI Avatar component image and adding text to it

I'm currently working with the Avatar component from Material UI along with Tailwind CSS. I found that by simply adding the image URL to the src, it displays the avatar successfully. <Avatar alt="Cindy Baker" src="https://mui.com/sta ...

javascriptcssreactjsmaterial-uitailwind-css

ExpressJS: utilizing middleware with regex

I'm facing an issue with routing using the regex matching feature in expressJS 4. I'm trying to utilize app.use() to specify which routes are accessible for URLs that do not begin with /api routesWebAuth.js var express = require('express& ...

javascriptregexnode.jsexpress

The history.push function seems to be leading me astray, not bringing me back

Issue with History.Push in Register Component App function App() { const logoutHandler = () =>{ localStorage.removeItem("authToken"); history.push("/") } const [loading, setLoading]= React.useState(true) useEffect(()=>{ ...

javascriptnode.jsreactjsreact-router

What is the best way to prevent the collapse v-b-toggle event from being triggered by an

I am currently using a v-b-toggle to toggle another div on and off. However, within the div where the v-b-toggle is located, there is an input checkbox. The issue that I am facing is that when I click on this checkbox, the toggle functionality is activa ...

vue.jsbootstrap-4togglebootstrap-vue

Tips for securely using PHP Mailer with your SMTP credentials

Forgive me for my lack of experience, but I'm in the learning process! I'm struggling to understand how my credentials will remain secure when using PHPMailer for a contact form on my website. When entering your credentials in the SMTP Paramete ...

phpbootstrap-4phpmailer