Looking to incorporate Bootstrap icons from the beta version of "Official open source SVG icon library for Bootstrap" into my project. You can find it at . Currently working with Bootstrap 4 in Rails 6.
After attempting different imports and includes in both application.js and application.scss, I'm still facing difficulties in getting it to work.
Any recommendations on how to successfully achieve this goal?
You can easily implement this using CSS, which offers a simple and familiar approach similar to the old glyph icon support. Firstly, start by adding bootstrap-icons to your project:
yarn add bootstrap-icons
Next, include it in your application.js file like so:
import 'bootstrap-icons/font/bootstrap-icons.css'
Then, wherever you want to utilize it, just insert an <i> tag with the desired class name:
<i class="bi bi-plus-circle"></i>
That's all there is to it!
After discovering the solution on a GitHub discussion, thanks to @chriskrams for providing crucial information.
Installation of the icons was done by running yarn add bootstrap-icons.
A helper function was then created in
app/helpers/application_helper.rbmodule ApplicationHelper was automatically generated.
module ApplicationHelper
def icon(icon, options = {})
file = File.read("node_modules/bootstrap-icons/icons/#{icon}.svg")
doc = Nokogiri::HTML::DocumentFragment.parse file
svg = doc.at_css 'svg'
if options[:class].present?
svg['class'] += " " + options[:class]
end
doc.to_html.html_safe
end
end
The location where yarn installs the icons is
node_modules/bootstrap-icons/icons/For example, to use an icon, you can type
<%= icon("bicycle", class: "text-success") %>You can also explore all available icons in
app/node_modules/bootstrap-icons/icons/To properly load the correct paths, you must modify the default font definition
yarn add bootstrap-icons
Next, include this in 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");
}
You can now utilize it like so:
<i class="bi bi-plus-circle"></i>
Remember to have
Rails.application.config.assets.paths << Rails.root.join('node_modules')config/initializers/assets.rb
steps for setup:
npm install bootstrap-icons
simply import into src/app/javascript/packs/application.js
import 'bootstrap-icons/font/bootstrap-icons.css';
npm install bootstrap-icons
To start using the library, follow these steps:
//= link_directory ../../../node_modules/bootstrap-icons .svg
Insert this line (in the app/assets/config/manifest.js file) to reference the bootstrap-icons.svg file for the 'shop' icon:
<svg class="bi" fill="currentColor">
<use xlink:href="<%= asset_path "bootstrap-icons/bootstrap-icons.svg" %>#shop"/>
</svg>
Similar to a "sprite" concept on the following page: . This method allows for easy sizing and color customization.
UPDATE:
Alternatively, you can create a helper function:
<%= bi_icon 'shop', class: 'shop-style' %>
.shop-style {
width: 16px; height: 16px; color: red;
}
A possible implementation for the above might be:
def bi_icon(icon, options = {})
classes = ["bi"].append(options.delete(:class)).compact
content_tag :svg, options.merge(class: classes, fill: "currentColor") do
content_tag :use, nil, "xlink:href" => "#{ asset_path 'bootstrap-icons/bootstrap-icons.svg' }##{icon}"
end
end
Utilizing rails version 6.1.5 along with tailwind CSS.
Added the package by running yarn add bootstrap-icons
Then included
import 'bootstrap-icons/font/bootstrap-icons.css'application.js
Although I could insert the icons using the <i> tag, they were displaying with a width of 0 or no stroke. To fix this issue, I made the following additions to scaffolds.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"); }
After implementing these changes, the icons are now being displayed correctly.
Is there a way to ensure that a CSS grid maintains the same width for repeating rows, even if the content in each cell varies in length? I am attempting to set column 1 to be 10% width, column 2 to be 45% width, and allocate the remaining space to column ...
Seeking assistance with creating text boxes for displaying reviews on a website. Each review is contained in a box, with varying heights based on the amount of text. Desired layout is shown in the image below, with black boxes representing review container ...
I have designed a custom menu in HTML: <div class="trigger" style="display:none;">menu</div> <div class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a& ...
https://i.sstatic.net/PL30l.png Struggling to achieve a TextField select with outlined variant and a see-through border. Here's the current theme override I'm using: overrides: { MuiOutlinedInput: { root: { backgroundColor: &ap ...
Is there a better way to create a dynamic zebra styling for table rows while still being able to hide certain elements without losing the styling? In this code snippet, I'm using the CSS :nth-of-type(even) to style even rows but running into issues wh ...
When I focus on my dynamic placeholder input, the text-overflow: ellipsis property is lost for some reason. However, it is regained when blurred. Can anyone explain why this is happening? If you want to experiment with it, I have set up a stackblitz: htt ...
Currently, I am facing a challenge with dynamically loading CSS, JS, and other components as it appears messy when viewed from the source. Although this issue does not impact functionality, I am not satisfied with how it looks in the source code. When exam ...
I have been experimenting with using the :before and :after pseudo-elements to generate diagonal lines within a container. However, I am encountering an issue where these pseudo-elements appear to have a white bottom border, and I am unable to determine t ...
I am working on creating a unique pendulum system using 3 balls. After successfully creating the balls and animating them, I am faced with a challenge in making the animation continuous. Here is my code: .circle { width:30px; height:30px; backgrou ...
I am facing a challenge with a dynamically generated table that has complex structure including colspans and rowspans. My goal is to fix the headers and, if possible, even lock the first few rows on the left side while allowing the content of the table to ...
Here is the code snippet I'm currently working with: @font-face { font-family: 'icomoon'; src:url('../fonts/icons/icomoon.eot?2hq9os'); src:url('../fonts/icons/icomoon.eot?#iefix2hq9os') format('embedded-opent ...
Currently, I am in the process of converting my project from using regular CSS to styled components (https://styled-components.com/). So far, I have successfully converted all my other components except for one that I'm having trouble with. I've ...
Let's say I have a table header with content like this... <th> <div class="text-left field-sorting " rel="local_inventory"> Local inventory </div> </th> <th> <div class="text-left field-sorting " rel="something el ...
I currently have a progress bar that I'm happy with, but I want to enhance it by incorporating stacked progress bars. My aim is to have the progress bar behave in the following way when an option is selected: https://i.stack.imgur.com/Pw9AH.png & ...
Looking to achieve a specific layout with only two resolutions in mind (767px minimum and maximum). For screens larger than 767px, display two divs side by side: one with text on the left and the other with an image on the right. The text remains in a fi ...
I'm struggling with adjusting the position of my dropdown list. It keeps hiding behind the carousel (slider). When I set the position of the carousel section to absolute, it causes the navbar to become transparent and the images from the carousel show ...
As part of a student exercise, I am attempting to access an API containing information about presidents and style them using CSS. However, I am facing issues with linking the style.css file. I have tried various methods to change the path and public path ...
I'm currently developing a weather application and I'm facing a challenge with centering columns using Bootstrap's grid system. I have two rows that display the current local weather conditions. In order to center these columns on the page, ...
I've successfully implemented tab switching, but I need to make the content fixed. How can I achieve this so that no matter the length of the content, it remains fixed in its position when switching tabs? The current issue is that when the content is ...
How can I remove the extra space around an image that is placed inside a bootstrap column? On the desktop version, I was able to solve the issue by setting -1rem margins on the left and right. I tried adjusting the body margin and padding to 0, as well as ...