What could be causing the icon link to not show up in Bootstrap 4?

Currently, I am engrossed in reading the book titled "ASP .NET MVC 5." However, I have hit a roadblock. The author utilizes Bootstrap 3 in the book, but the newer version of Bootstrap contains some modifications that are causing me difficulties in solving my issue.

The book provides the following code snippet:

<div class="navbar-right visible-xs"> 
<a <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea82988f8cd7aabf9886c4ab899e838584">[email protected]</a>("Index", "Cart", new { returnUrl = Request.Url.PathAndQuery })
class="btn btn-default navbar-btn">
<span class="glyphicon glyphicon-shopping-cart"></span></a></div>

On the other hand, I attempted to implement the following code:

<div class="navbar-brand d-block d-sm-none">
<a href="@Url.Action("Index", "Cart", new {returnUrl = Request.Url.PathAndQuery})" class="btn btn-primary">
    <i class="fa fa-plus"></i>
</a>

My goal is for the output to display an icon link of "+", but unfortunately, all I see is an empty button without the desired icon.

Answer №1

<script src="https://kit.fontawesome.com/5d3b374b3f.js" crossorigin="anonymous"></script>

Include the provided script link in the head section of your HTML document.

When using a button element, consider adding

<i class="fas fa-plus"></i>
to enhance its design.

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

Move the navigation bullets of the Nivo Slider to the bottom instead of below the slider

Currently working on a website and have incorporated Nivo Slider to develop a jQuery slider. Encountering an issue with the bullets that indicate which slide the user is currently viewing. I'd like these bullets to be displayed on the images within t ...

Issue with Color Attribute in Heading within an Ionic Content Element

The color attribute doesn't seem to be working in Ionic 2. It works fine with normal Ionic tags, but not with HTML tags. Can someone help me with this? The code is provided below. <ion-content> <div class="page-home"> <h1 color="second ...

Should I choose Angular with MVC or opt for Vue with MVC?

Exploring options for a fresh web solution utilizing MVC to showcase actual data, what would be the best choice between integrating Vue.js or Angular? Which of these frameworks is more suitable for a MVC project with a focus on scalability and seamless i ...

Creating an email body using css and html from a file on Android - how can it be done?

After searching extensively, I have come across a plethora of solutions on how to load HTML into the body of an email intent. However, I am struggling to find a way to load a file that contains CSS and HTML content. I have a specific program in which I dis ...

Using jQuery to create a captivating Parallax Effect on your website's background image

Hey there! I have a div with the class 'section' that serves as a key element on my website. It has a background image set using the following CSS: .section-one { width: 100vw; height: 100vh; background-image: url(images/outside-shot ...

What is the best way to combine this PHP, Javascript, and HTML document together?

My goal is to upload a CSV file exclusively using an HTML form and then save it in an array using PHP and Javascript. I have individual codes that work perfectly when used as separate files. However, when I attempt to combine them into one file, the Javas ...

Issue with videos not playing and difficulty navigating through hyperlinks

Here is the link to my webpage (for preview of my code): I am using Bootstrap 4 for my project. Everything works fine, but I am facing two small issues with the Cookies Box: The animation moves from left to right (which is correct) - but then it returns ...

Play button icon is missing in Firefox when using absolute positioning

I'm currently experiencing an issue with my video gallery section. I have both normal and hover versions of a play button positioned above a preview image of a video. However, the play buttons are not visible at all in Firefox. You can view the page h ...

Tips on using php within <<<DELIMETER:

Here is the code snippet I'm working with: $footer_rotem = <<<DELIMETER <div class="tile red"><img src="http://localhost/be/wp-content/plugins/Rotem%20Gallery/img/4.png"></div> <div class="tile red"><i ...

Creating a form that is unable to be submitted

Can a form be created in HTML without the ability to submit, all while avoiding the use of JavaScript? I would like to utilize <input type="reset"> and have intentionally omitted an <input type="submit">, but there is still the possibility for ...

PHP Newsletter Creator

Recently, I created a unique php newsletter script in CakePHP that allows users to utilize an in-place editor to generate HTML content for newsletters. While the functionality works well, I have encountered some challenges with a new newsletter design that ...

The search bar extends beyond the dropdown in a boostrap collapse scenario

Currently, I'm facing two issues that I need assistance with: On smaller screens, the search bar drops out of the navbar collapse inexplicably, and I'm struggling to identify the cause. The width of the search bar seems to be overriden by A ...

Convert HTML table data to JSON format and customize cell values

Hey there, I have a HTML table that looks like this: <table id="people" border="1"> <thead> <tr> <th>Name</th> <th>Places</th> <th>Grade</th> </tr> & ...

Navigate to the homepage section using a smooth jQuery animation

I am looking to implement a scrolling feature on the homepage section using jquery. The challenge is that I want the scrolling to work regardless of the page I am currently on. Here is the HTML code snippet: <ul> <li class="nav-item active"> ...

Is there a way to retrieve the row and parent width from a Bootstrap and Aurelia application?

Is there a way to determine the exact width of a bootstrap grid row or grid container in pixels using Aurelia? I attempted to find this information on the bootstrap website, but I am still unsure as there are multiple width dimensions such as col-xs, colm ...

The Bootstrap navigation bar is experiencing functionality issues when viewed on Chrome mobile browsers

I'm currently testing out the bootstrap 3 navbar feature on my meteor application, but I'm encountering some issues specifically on mobile devices. The problem seems to be that the toggle button is not showing up as expected. Interestingly, it wo ...

What is the best method for accommodating various web devices effectively?

Those deciding to close this as not conducive, please read through the entire post. Specific questions will be posed at the end. Seeking practical examples and strategies. Situation As more and more people use devices like smart-phones and tablets to acce ...

The CSS files are not downloading for me

I am trying to incorporate some .css files into my Django project, but for some reason they are not loading. The css files can be found at "/myproject/media/css". Here is how I have set it up: import os.path PROJECT_DIR = os.path.dirname(__file__) ME ...

How can I utilize Bootstrap to properly space items within a layout?

I'm having some difficulty creating spaces between the controls while using ml-auto. My goal is to have each control separated with spaces in between, specifically the "Core Status label" should be far apart from each other and aligned on a horizontal ...

How to Add a Dynamic Underglow Effect to Your Bootstrap Navbar?

This is my first question on this platform, but I have been using it extensively while learning web development and various other skills. A friend and I have been using Bootstrap to create a website, and we have come across some incredibly stunning navbars ...