Menu
I wanted to use Bootstrap icons in beta "Official open source SVG icon library for Bootstrap." https://icons.getbootstrap.com/. This is for Bootstrap 4 in Rails 6.
I tried various imports and includes in application.js and application.scss with no success
How do I accomplish this?
816
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.
Using Icons in Bootstrap 5You can use them with or without Bootstrap in any project. The advantage of using font icons is, you can create icons of any color just through applying the CSS color property. Also, to change the size of icons you can simply use the CSS font-size property.
You need to override the default font definition to load the appropriate paths
yarn add bootstrap-icons
Then add to your application.scss:
@import "bootstrap-icons/font/bootstrap-icons";
@font-face {
font-family: "bootstrap-icons";
src: font-url("bootstrap-icons/font/fonts/bootstrap-icons.woff2") format("woff2"),
font-url("bootstrap-icons/font/fonts/bootstrap-icons.woff") format("woff");
}
Then you can use it:
<i class="bi bi-plus-circle"></i>
Make sure you have Rails.application.config.assets.paths << Rails.root.join('node_modules') in your config/initializers/assets.rb
190
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
