How to use bootstrap-icons in laravel

Question

There is an error in the answer of mili, anycodings_twitter-bootstrap because if

Table of Contents Show

Bootstrap Icons
Development
npm scripts
Adding SVGs
Publishing
How do I add icons to bootstrap?
How do I use font awesome icons in laravel?
Can I use laravel with bootstrap?
How does bootstrap 5 integrate with laravel?

@import anycodings_twitter-bootstrap '~bootstrap-icons/font/bootstrap-icons';

is included in resources\sass\app.scss anycodings_twitter-bootstrap then no @font-face directive is included anycodings_twitter-bootstrap in my app.css file when building with anycodings_twitter-bootstrap npm run dev. To make appear the anycodings_twitter-bootstrap directive I had to add the anycodings_twitter-bootstrap Ã‚Â«cssÃ‚Â» extension so the anycodings_twitter-bootstrap correct @import would be:

@import anycodings_twitter-bootstrap '~bootstrap-icons/font/bootstrap-icons.css';

But there is another problem, in this anycodings_twitter-bootstrap case a problem of the builder, that anycodings_twitter-bootstrap produces that the icons are not showed anycodings_twitter-bootstrap by the browser (instead appear an square anycodings_twitter-bootstrap meaning that the broswer could not anycodings_twitter-bootstrap render the svg icon). The builder anycodings_twitter-bootstrap generates the following directive in anycodings_twitter-bootstrap public/css/app.css

    @font-face {
  font-family: "bootstrap-icons";
  src: url(/fonts/vendor/bootstrap-icons/bootstrap-icons.woff2?dfd0ea122577eb61795f175e0347fa2c) format("woff2"),
url(/fonts/vendor/bootstrap-icons/bootstrap-icons.woff?94eeade15e6b7fbed35b18ff32f0c112) format("woff");
}

Laravel does not find the files because anycodings_twitter-bootstrap url() does not understand the absolute anycodings_twitter-bootstrap path (in my development environment). If anycodings_twitter-bootstrap you add Ã‚Â«..Ã‚Â» before the anycodings_twitter-bootstrap two paths, then all works (the icons anycodings_twitter-bootstrap appear in the page):

    @font-face {
  font-family: "bootstrap-icons";
  src: url(../fonts/vendor/bootstrap-icons/bootstrap-icons.woff2?dfd0ea122577eb61795f175e0347fa2c) format("woff2"),
url(../fonts/vendor/bootstrap-icons/bootstrap-icons.woff?94eeade15e6b7fbed35b18ff32f0c112) format("woff");
}

The problem is that every time that you anycodings_twitter-bootstrap run npm run dev for any other package, anycodings_twitter-bootstrap the ".." are automatically overwritten, anycodings_twitter-bootstrap so the icons are not seen any more.

I have seen other people out there with anycodings_twitter-bootstrap the same problem, but I do not know anycodings_twitter-bootstrap where should be notified the issue and anycodings_twitter-bootstrap the solution. I will try to find a anycodings_twitter-bootstrap feedback window in anycodings_twitter-bootstrap https://getbootstrap.com/

Bootstrap Icons

Install

Bootstrap Icons are packaged up and published to npm. We only include the processed SVGs in this package—it's up to you and your team to implement. Read our docs for usage instructions.

For those using Packagist, you can also install Bootstrap Icons via Composer:

composer require twbs/bootstrap-icons

Also available in Figma.

Usage

Depending on your setup, you can include Bootstrap Icons in a handful of ways.

Copy-paste SVGs as embedded HTML
Reference via <img> element
Use the SVG sprite
Include via CSS

See the docs for more information.

Development

Clone the repo, install dependencies, and start the Hugo server locally.

git clone https://github.com/twbs/icons/
cd icons
npm i
npm start

Then open http://localhost:4000 in your browser.

npm scripts

Here are some key scripts you'll use during development. Be sure to look to our package.json for a complete list of scripts.

Script	Description
`start`	Alias for running `docs-serve`
`docs-serve`	Starts a local Hugo server
`pages`	Generates permalink pages for each icon with template Markdown
`icons`	Processes and optimizes SVGs in `icons` directory

Adding SVGs

Icons are typically only added by @mdo, but exceptions can be made. New glyphs are designed in Figma first on a 16x16px grid, then exported as flattened SVGs with fill (no stroke). Once a new SVG icon has been added to the icons directory, we use an npm script to:

Optimize our SVGs with SVGO.
Modify the SVGs source HTML, removing all attributes before setting new attributes and values in our preferred order.

Use npm run icons to run the script, run npm run pages to build permalink pages, complete those pages, and, finally, commit the results in a new branch for updating.

Publishing

Documentation is published automatically when a new Git tag is published. See our GitHub Actions and package.json for more information.

License

MIT

Author

@mdo

How do I add icons to bootstrap?

Go to the official site of Bootstrap & copy the Bootstrap CDN for CSS, JS, Popper. js, and jQuery links. Add the CDN link along with add font icon link inside the <head> tag. Add the class with bi bi-icon_name followed by the name of the icon.

How do I use font awesome icons in laravel?

Example 1: Install using Namp For this, the following command will be used. Using this command, the folder of mode_module will be created in our root directory, which will store all npm modules. Now, we will use the following npm command and install the font-awesome library: npm install font-awesome --save.

Can I use laravel with bootstrap?

Introduction. While Laravel does not dictate which JavaScript or CSS pre-processors you use, it does provide a basic starting point using Bootstrap, React, and / or Vue that will be helpful for many applications. By default, Laravel uses NPM to install both of these frontend packages.