There is an error in the answer of mili, anycodings_twitter-bootstrap because if
@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 //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 //github.com/twbs/icons/ cd icons npm i npm start
Then open //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.
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