Utilizing Bootstrap Icons in Blazor: A Step-by-Step Guide

Following the instructions in this article, I attempted to add icons to my app. Here is the link to the article:

In order to do so, I included the Bootstrap Icons font stylesheet in the Head section of App.razor:

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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="MyApp.styles.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32505d5d4641464053421f5b515d5c4172031c011c02">[email protected]</a>/font/bootstrap-icons.css">     
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>

I then attempted to use an icon from the provided list, for example: 

<NavLink class="nav-link" href="Account/SignIn">
       <i class="bi bi-0-circle"></i>
       <span class="nav-menu" aria-hidden="true"></span> Sign In
</NavLink>

However, despite my efforts, the icon did not display properly. I even tried another method:

<span class="bi bi-0-circle nav-menu" aria-hidden="true"></span> Sign In

I am unsure why the icon is not showing up as expected. Can anyone help me troubleshoot this issue?

htmlcssasp.net-coreblazorbootstrap-5

Answer №1

The version 1.3.0 of Bootstrap Icons is considered quite outdated, as it was released four years ago. According to the Bootstrap Icons documentation, it showcases all the icons available in the most recent version (1.11.0).

If you search for the term "0-circle" in the 1.3.0 version, unfortunately, it does not exist.

However, when using the same search method on the 1.11.0 version, it is supported.

Therefore, it is recommended to utilize the latest Bootstrap Icons version (1.11.0).

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4944445f585f594a5b0642484445586b1a051a1a051b">[email protected]</a>/font/bootstrap-icons.css">

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

Input form with multiple fields. Automatically display or hide labels based on whether each field is populated or empty

I am attempting to create a form where the placeholders move to the top of the input when it is focused or filled. However, I have encountered an issue with having multiple inputs on the same page. Currently, my JavaScript code affects all inputs on the pa ...

javascripthtmljquerycssplaceholder

Utilizing Ajax to Create a Form with Invisible Google Recaptcha

Here is my code: function submitForm(token) { $(document).ready(function() { $("#submit").click(function() { var name = $("#name").val(); var email = $("#email").val(); var password = $("#password").val(); var contact = $ ...

javascriptjqueryhtmlajaxforms

Directives and Transclusion: A Comprehensive Guide

I am currently working on creating navigation directives to simplify complexity. My goal is to have the following HTML structure for my navigation: <custom-nav> <nav-item>Item 1</nav-item> <nav-item>Item 2</nav-item> ...

angularjshtmlangularjs-directivesemantic-markup

Creating a seamless video texture loop using PixiJS

I have successfully loaded a video texture and rendered it using pixi. // initialize a new pixi stage var stage = new PIXI.Stage(0x66FF99); // create a renderer instance var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.inner ...

htmlvideohtml5-canvaspixi.js

Ways to dynamically update URL without the need for a page reload

So here's the plan (I believe Google uses a similar setup): Scenario A : On page /Main_Page, imagine there are 3 sections. When a user clicks on "section A," the content of that section is loaded via AJAX and added to the page. Scenario B : Now, l ...

javascripthtmlajax

Having difficulty centering an image in HTML?

I've been struggling to get the image (logo) centered on the top bar! I've tried using align-self: center;, display:block;, but nothing seems to work. It feels like I'm missing something here! Click here for the codesandbox link to view the ...

htmlcss

Tips for reaching a node.js application deployed on Heroku

Trying to deploy my node.js app to Heroku has been a challenge. Despite watching various tutorials and reading the documentation, I'm stuck on how to send and receive data from the hosted node.js app. The communication between my webpage and the node. ...

javascripthtmlnode.jsheroku

I am having issues with my search form - it doesn't appear to be

I am trying to create a search form that will display users (username, firstname, or lastname) from my database as the user types, similar to how Facebook and Twitter do it. However, when I click on the search button, nothing happens. Below are two parts o ...

phphtml

Expansion issue with Bootstrap panel

I am currently using Bootstrap 3 for the development of a social networking site. The issue I'm encountering involves displaying comments within a panel footer on toggle. However, the comments are extending beyond the footer area. Can anyone provide g ...

phphtmlcsstwitter-bootstrap-3

What's the best way to eliminate blank space in my Bootstrap grid columns?

I'm facing an issue with the search filter layout on my website. It includes input fields for a search term, two datepickers, and two buttons: <div id="search-holder"> <div id="search-box"> <div ...

htmlcsstwitter-bootstrapbootstrap-4

Transforming PHP Variable Using Ajax

I have a variable called $type and I need it to be either month or year. This change should occur when a div is clicked. I attempted to use an onclick event with an ajax call. The ajax call and the variable are both in the same script (index.php). Within ...

javascriptphpjqueryhtmlajax

Tips for aligning multiple columns within a Bootstrap 3 carousel

For quite some time, I have been trying to solve this puzzle. My goal is to have the featured image displayed to the left of the carousel, with its associated text to the right. I've created a mockup to illustrate exactly what I mean. I can achieve t ...

htmlcsstwitter-bootstrap

Guide to leveraging the jotform API for form integration

Seeking a method to display forms created in JotForm using APIs. The goal is to make an API call, pass an ID, and retrieve the required information from JotForms to render the created form in JotForm. After researching, I haven't found a suitable sol ...

phphtmlapijotform

Automatically Format Date Input and Block Alphabetic Characters

I am in need of an HTML form that has two distinct sections. The first part requires the user to input their date of birth in a specific format. I have successfully implemented the auto-formatting feature that adds slashes as the user types. However, I am ...

jqueryhtml

Encountering a "Multiple registrations of the method 'get' on the path '../api/' error" with Swagger

I am utilizing OpenAPI / Swagger in an Angular application built on .NET Core, and I am facing the error "The method 'get' on path '../api/' is registered multiple times" while generating frontend TypeScript code using NSwag Studio. Fro ...

angularasp.net-coreswaggeropenapinswag

What is the best way to ensure my images are responsive to the varying device sizes when displayed on this website?

In my endeavor to design a 2-column layout using Bootstrap, I aim for each row to consist of two columns: One column will contain text, while the other will display images that complement the textual content. Below is the Bootstrap code snippet for the n ...

htmltwitter-bootstrapcssvuejs2

What is the proper way to invoke the bold feature in AngularJS?

I am looking to update the font properties (bold or italic) within a Textarea using AngularJS. Here is the code snippet for your review. Can anyone guide me on how to implement the bold property in my script? HTML: <div ng-app='myNoteApp' ng ...

htmlangularjsangularjs-directive

Error Alert: Express configuration encounters Unforeseen character <

This is how I have set up my Express: const express = require('express'); const app = express(); app.use(express.static('public')); app.get('*', function (req, res) { res.sendfile('dist/index.html'); }); app.li ...

javascripthtmlexpress

Implementing alignment adjustment for search bar with bootstrap 5.0

Is there a way I can adjust the positioning of the search bar and button to align left after the navbar-brand element in a continuous manner? I have tried using the bootstrap classes justify-content-start and text-left, but they did not yield the desired r ...

htmlcsstwitter-bootstrapbootstrap-5

Having issues with RTL on MuiTextField when using special characters

Currently, I am working on a project where Mui is being used. I have successfully applied RTL according to the Mui guide. However, I am encountering a frustrating problem where special characters in MuiTextField are aligning to the left instead of the righ ...

cssreactjsmaterial-ui