Updating the font path for Bootstrap-icons on a static website

I need to update the @font-face src path in my bootstrap-icons to ensure it displays correctly in my index.html

My process involves using sass and Laravel Mix to compile to CSS.

This is the content of my src/sass/app.scss file:

@import "~bootstrap-icons/font/bootstrap-icons";

This is what my index.html file looks like:

<i class="bi bi-archive-fill"></i>

Here is an overview of my file structure :

my-app/
├── dist/
│   ├── assets/
│   │    ├── css/
│   │    │    ├── app.css
│   ├── fonts/
│   │    ├── vendor/
│   │    │    ├── bootstrap-icons/
│── src/sass/
│    ├── app.scss
├── index.html
htmlcsssassbootstrap-5

Answer №1

To change the @font-face rule, you can do the following:

@import "~custom-icons/font/custom-icons";

@font-face {
  font-family: "custom-icons";
  src:  url("../../fonts/vendor/custom-icons/custom-icons.woff2?856008caa5eb66df68595e734e59580d") format("woff2"),
        url("../../fonts/vendor/custom-icons/custom-icons.woff?856008caa5eb66df68595e734e59580d") format("woff");
}

I encountered a similar issue and this solution worked well for me :)

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

Optimize your website by implementing automatic HTML DOM updates without the need to reload the entire page to read database information

Currently, I am working with Asp.Net MVC and SQL server. My goal is to update the HTML content dynamically with new data from the database without having to reload the entire page. What would be the most efficient approach to achieve this? @foreach (var ...

jqueryhtmlsqlasp.net-mvc

Wrapping a list vertically with ASP.NET using a repeater for generation

I have a repeater that is creating a list of links in no particular order. I want the list to be displayed as follows: -Item1 -Item4 -Item2 -Item5 -Item3 Most solutions I've found require you to know the items in advance and set specific classes for ...

asp.netcsslistxhtmlrepeater

The process involves transferring information from a specific div element to a database. This particular div element obtains its data after receiving an appended ID

It's a bit complicated, but I'm working on creating a tag system. I'm fetching data from a database with an AJAX call using the "@" symbol. Everything is working fine - the tags are being generated, but I'm having trouble retrieving and ...

javascriptphpjquerycssajax

How can I ensure consistency in style and components across various HTML files while allowing for unique body content?

I'm new to web development and I'm curious about the best way to create multiple pages with the same components (header, sidebar, footer) but different content. I've seen suggestions for using PHP includes and HTML imports. Let's take ...

htmldjango

Creating a Custom Alert Box in Javascript with Image Alignment

I have just finished creating a custom alert box using Javascript, complete with text and images. However, I am facing an issue with alignment. The output is not as expected. I am trying to display the correct mark and text on the same line. Can someone ...

javascriptjqueryhtmlajax

Excessive text in the input text area causing overflow

I am experiencing a minor issue with the primefaces inputTextArea. Whenever the text exceeds the assigned panel height, it overflows behind the next panel. Interestingly, clicking into the textarea resolves the problem temporarily, but on initial page view ...

htmleclipsejsfprimefacestextarea

`Div Elements Overlapping`

Lately, I have been working on my personal portfolio and I encountered an issue with the contact form overlapping the footer. Can anyone provide some guidance on how to resolve this? Any help is greatly appreciated. https://i.stack.imgur.com/neIbs.gif ...

htmlcssoverlapping

Is there a way to switch the alignment of my text to the left side and move the form over to the right side?

How can I change the layout in Bootstrap 5 so that my text appears on the left hand side of my login page and the login form on the right? I have tried but failed, is there anyone who can help please? Here is my text: <div class="container"& ...

htmlcssbootstrap-5

Second word in the textbox receiving attention

When I type in the text box, it always focuses on the second word instead of the first word. If I set Maxlength=1, it doesn't allow me to type. I have to press backspace before typing. Can anyone help me with this issue? Below is my code: <input ...

phpjqueryhtmlcss

Is it possible to clear/reset the file input when the page is loaded?

One of my tasks involves clearing a file upload input field when the page is loaded. I've searched through 10-15 different ways on stackoverflow to accomplish this, but every solution requires a reset button which doesn't meet my requirement of a ...

javascriptjqueryhtml

Leveraging ng-click and ng-hide/show directives within ng-repeat in Angular

I have a simple Single Page Website built with Angular. I utilized ng-repeat to generate content on the main page, where each item is an image. I am looking to create an alternate view for each image to display more details. I have implemented this feature ...

javascripthtmlcssangularjs

Switch between different classes with JavaScript

Here is the code that I am working with: This is the HTML code: <div class="normal"> <p>This is Paragraph 1</p> <p>This is Paragraph 2</p> <p>This is Paragraph 3</p> <p>This is Paragraph 4&l ...

javascripthtmlcss

Is there a way to prevent Javascript from modifying styles when printing?

Is there a way to prevent JavaScript from affecting styling during printing? For example, if I'm using JavaScript to hide certain content but want that content to be visible when printed. I have hidden a div using JavaScript and now I'm trying ...

javascriptcssxhtmlprinting

Can the parent document interact with Shadow DOM elements?

When it comes to user-created shadow DOM elements, this question focuses more on accessibility using the date input type: For instance, let's say there is a date input on a webpage. After some editing, the shadow DOM markup for this element (in Chrom ...

javascripthtmlweb-componentshadow-dom

Update a JQuery function for an input field following an innerHTML command

Using JQuery to check the file size and name from an html file input field can be a useful tool. The input field in question looks like this: <div id="uploadFile_div"> <input name="source" id="imageFile" type="file" style ="border: 1px solid ...

javascriptjqueryhtmlforms

The functionality of Jquery is successfully integrated into a specific function, however it seems to only work for one of the calls. To make the other call work,

After a user makes a selection, I am attempting to reset the 'selected' item. This process calls the Vue function tS() shown below. The issue lies with the first call $('#sel1').prop('selectedIndex',0);, as it only seems to wo ...

javascriptjqueryhtmlvue.js

What is the best way to display a red cross on a button?

Could you please help me add a red cross (font awesome icon) to the button? I attempted to implement the code on JSFiddle. However, I still need: UPDATE Initially, I found Kiranvj's answer suitable for its simplicity and applicability to all r ...

htmlcssbuttonfont-awesomefont-awesome-5

concealing the date selection feature on the data picker

$('.year').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', onOpen: function(dateText, inst) { $("table.ui-datepicker-calendar").addClass('hide') }, onClos ...

javascriptjquerycsscalendar

Replicate the preceding input data by simply clicking a button

Here is some HTML and jQuery code that I am working with: $(".btn-copy").click(function() { var previousContent = $(this).prev()[0]; previousContent.select(); document.execCommand('copy'); }); <script src="https://cdnjs.cloudflare.com ...

javascripthtmljquery

Modifying the HTML attribute value (of input) does not impact the value property

After inputting a single tag, I ran the following code in my Chrome console: https://i.stack.imgur.com/ySErA.jpg The result was unexpected for me. According to what I have read in a book, when I change an HTML attribute, the corresponding property should ...

javascripthtmlgoogle-chromeattributes