Coming from Font Awesome I'd like to use the new Bootstrap Icons in my web project. Unfortunately the inclusion of Bootstrap Icons seems way more tedious in regard to the amount of code I have to insert.
What I'm looking for:
Take for example the icon bi-chevron-right. Is there any way to use Bootstrap Icons as a font? Pseudo-code:
<i class="bi bi-chevron-right"></i>
That way would have several benefits:
Simple and clean inclusion of an icon.
Better loading times since only 1 external file is included for all icons of the project.
Way more flexibility where to place the actual icon library (consider for option b) that you change the path of the library, you'd have to update all references!).
No hard-coding of the actual icon size since this can be controlled by plain CSS.
What the docs currently only offer:
The docs currently offer several ways of inserting icons. All of them include quiet some code to write.
a) directly embed the SVG:
<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"/></svg>
b) or use an SVG sprite:
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="/path/to/bootstrap-icons.svg#chevron-right"/>
</svg>
c) or link an external image:
<img src="/path/to/bootstrap-icons/chevron-right.svg" alt="" width="32" height="32" title="Bootstrap">
(Not speaking of the CSS variant which is basically identical to option a), just more tedious.)
Or am I missing something?
What also work is:
npm install bootstrap#next
npm install bootstrap-icons
then in your main.css
#import url('../../../node_modules/bootstrap-icons/font/bootstrap-icons.css');
and then in the HTML
<i class="bi bi-alarm"></i>
With version 1.2, .woff files are now included and you can use it by typing
"<i class = 'bi-alarm'> </i>" like font-awesome.
<link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.css">
Source: https://blog.getbootstrap.com/2020/12/11/bootstrap-icons-1-2-0/
Look at documentation below
Use this link in HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
I want to have the facebook customer chat svg icon from this site: https://craftedmiracle.com/. How can I get it? Thanks
I want the icon that have round white background EXACTLY on the above web. Fb also provides messenger icon but it does not look like the version on the web
I inspect the web but don't know how to extract the svg tag to .svg file
You can visit this link:
https://icons8.com/icons/set/facebook-messenger
This has facebook icons that you want in many forms. Click on Download > Select SVG tab > Select the Size of icon that you wish to download > Finally Download.
EDIT:
Or I have created an SVG for you:
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 172 172" style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><path d="M86,172c-47.49649,0 -86,-38.50351 -86,-86v0c0,-47.49649 38.50351,-86 86,-86v0c47.49649,0 86,38.50351 86,86v0c0,47.49649 -38.50351,86 -86,86z" fill="#3498db"></path><g><path d="M86,28.66667c-30.1,0 -54.46667,23.22 -54.46667,51.6c0,14.90667 6.59333,28.09333 17.2,37.55333v25.51333l22.36,-13.47333c4.58667,1.14667 9.74667,2.00667 14.90667,2.00667c30.1,0 54.46667,-23.22 54.46667,-51.6c0,-28.38 -24.36667,-51.6 -54.46667,-51.6z" fill="#ffffff"></path><path d="M51.6,97.46667l28.66667,-31.53333l14.33333,14.33333l25.8,-14.33333l-28.66667,31.53333l-14.33333,-14.33333z" fill="#3498db"></path></g><path d="" fill="none"></path></g></svg>
Hope this helps.
https://iconmonstr.com/facebook-messenger/
https://fontawesome.com/icons/facebook-messenger
Also - if you're using Font Awesome, they have an icon for it as well.
You can also download it and serve it locally, depending on your needs.
I have the following nested html elements :
<div class="trend-line-chart">
<div class="title"></div>
<div class="chart">
<div class="">
<svg width="200" height="100">
<g>
<g>
<g>
<path></path>
<path></path>
<path></path>
<g>
<defs>
<lineargradient id="LineChartGradient" gradientTransform="rotate(90)">
<stop offset="10%" stop-color="#D6EBF3"></stop>
<stop offset="10%" stop-color="#D6EBF3"></stop>
</lineargradient>
</defs>
<polygon points="...." stroke="#8AB9E1" stroke-width="0" fill="url(/dashboard/renderer#LineChartGradient)" fill-opacity="0.5"></polygon>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
This component is within a larger html file with lots of other components.
At first the fill gradient didn't work until I added /dashboard/renderer to its URL path (which you can see in the code above) . Now , once again it's not working. As we are developing a dashboard , we move pages to different paths. And I'm sure the reason of not showing up is the the url. Any idea on how to refer to the fill gradient locally ? So regardless of the path it always works.
Does you HTML header have a <base> element? If so, it will interfere with how the browser interprets gradient URLs.
If you need to keep the <base> element, then the solution is to use an absolute URL (as you seem to have discovered).
fill="url(/path/to/my/HTML/file#LineChartGradient)"
You say it has stopped working. Has the URL of your page changed recently?
SVG Gradients are defined in the document with a unique id attribute, and then referenced from another element as a URL. Currently, our AngularJS code uses html base tag which stop the SVG Gradient from working. The reason is that the url is not relative to the current document anymore but they are computed relative to the specified separate URI.
It looks like that there's a fix for this bug in AngularJS : https://github.com/angular/angular.js/issues/8934#issuecomment-56568466
References:
[1] SVG Gradient turns black when there is a BASE tag in HTML page?
[2] Angular and SVG filters
SUMMARY: An SVG sprite contains five icon <symbol> blocks, one of which references its own gradient definition by ID. It is no longer able to find this gradient and render properly.
JSFIDDLE: http://jsfiddle.net/Qtq24/1/
I am switching some graphics to SVG, and being that they are icons (in this case for social networking profiles) I'd like to keep them in a sprite (as I had with PNG before).
I've followed this guide to SVG sprites on CSS-tricks.com (along with this follow-up which advises using <symbol> instead of <g>).
I now have an SVG sprite file, social-sprite.svg, which you can view in full here.
This is one complete <svg> block containing five different <symbol> blocks, each with an id and with a viewBox attribute. In each case I got the SVG code for each symbol by preparing official icons in Adobe Illustrator and retaining the relevant parts of the processed code.
The .svg file is included via PHP as soon as the <body> tag opens (and this is why the main <svg> container inside it is marked with style="display: none;") so that the references to each symbol work from the HTML.
Four icons work perfectly, and the only one I am having trouble with is the YouTube icon, because it uses an internally-defined gradient. Here is the YouTube part of the SVG code:
<symbol id="youtube" viewBox="0 0 400 281.641">
<path id="Triangle" fill="#FFFFFF" d="M159.845,191.73l106.152-54.999L159.845,81.348V191.73z"/>
<path id="The_Sharpness" opacity="0.12" fill-rule="evenodd" clip-rule="evenodd" fill="#420000" d="M159.845,81.348l93.091,62.162
l13.061-6.778L159.845,81.348z"/>
<g id="Lozenge">
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="200.4204" y1="2.6162" x2="200.4204" y2="278.9292">
<stop offset="0" style="stop-color:#E52D27"/>
<stop offset="1" style="stop-color:#BF171D"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M392.928,62.226c0,0-3.839-27.073-15.617-38.995C362.371,7.583,345.626,7.506,337.947,6.59
c-54.975-3.974-137.441-3.974-137.441-3.974h-0.171c0,0-82.464,0-137.44,3.974c-7.68,0.916-24.419,0.993-39.364,16.641
C11.753,35.153,7.92,62.226,7.92,62.226s-3.929,31.792-3.929,63.583v29.805c0,31.791,3.929,63.582,3.929,63.582
s3.833,27.073,15.611,38.995c14.945,15.646,34.575,15.152,43.318,16.792c31.43,3.015,133.571,3.946,133.571,3.946
s82.552-0.124,137.526-4.099c7.679-0.915,24.424-0.993,39.363-16.64c11.778-11.922,15.617-38.995,15.617-38.995
s3.923-31.791,3.923-63.582v-29.805C396.851,94.017,392.928,62.226,392.928,62.226z M159.863,191.73l-0.018-110.383
l106.152,55.384L159.863,191.73z"/>
</g>
</g>
</symbol>
And this is called in the HTML with:
<svg width="30" height="21">
<use xlink:href="#youtube" src="fallback.png" width="30" height="21" />
</svg>
The opening two paths work fine, the problem is that in this new combined sprite SVG file, with each icon separated as a <symbol>, the "Lozenge" <path> is unable to find the #SVGID_1_ reference to the <linearGradient>.
In Firefox this causes the lozenge to display as white (I assume, perhaps it is not displaying at all - not really looked into it):
whilst Chrome renders it in black:
Obviously neither is acceptable. The only thing I can do at the moment is remove fill="url(#SVGID_1_)" on the path and just fill with a flat colour red appropriate to the YouTube logo. This is not a proper solution though, even discounting the fact that bastardising the YouTube logo in this way would not be accepted under their brand guidelines.
Things I've tried (and had no luck with):
removing the two <g> wrappers that surround the gradient and the path, so the whole of the symbol is just <path>-<path>-<linearGradient>-<path>
wrapping the gradient definition inside a <defs> container
wrapping it in a <defs> and also moving it to the top of the SVG file, i.e. outside the bounds of the YouTube-specific <symbol>
changing ID name (you never know!)
redefining the gradient with percentages rather than pixel values
So how do I get an already-internal <symbol> to reference an also-internal <linearGradient> definition?
EDIT: It turns out the gradient fails when the whole <svg> block is marked with style="display: none;". If this style is removed, the gradient renders properly. But as a reminder, this styling is added so that when you import the SVG sprite it is not rendered instantly on the page, and just allows you to make references to the id-defined symbols as required.
visibility: hidden or opacity: 0 both allow the gradient to render properly, obviously they don't offer proper solutions though as they still demarcate the space that the SVG would have taken up if visible.
After discovering all this, I was pretty sure it would be no problem to have the fully visible <svg> with no stylings added INSIDE a container <div> which is hidden. However, even this causes the gradient not to render. I'm no closer to solving the issue.
Firstly please note the edit to my question - whereupon I discover that the use of display: none to hide the SVG symbols until we need them was the problem.
I kept fiddling and settled upon this "answer", which is far from perfect, but should still be reliable for any such situation.
All you need to do is wrap the entire <svg> code in a <div> container which must be displayed but will never affect layout, so I've just done this via mega overkill CSS such as:
height: 0; width: 0; position: absolute; visibility: hidden;
And this works great. See the final fiddle: http://jsfiddle.net/Qtq24/5/
If anyone has a better solution, I'd love to hear it as this feels like a bit of a hacky way of doing it but I guess no more hacky than having to use display: none; anyway.
Don't use style="display: none;" in SVG. You have it on the root <svg> element. Either visibility:hidden, height/width="0" or <defs> are better alternatives.
There used to be a bug in Firefox with gradient elements in symbols. That bug was fixed many versions ago now. The original code works as expected.
<svg width="30" height="21">
<symbol id="youtube" viewBox="0 0 400 281.641">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="200.4204" y1="2.6162" x2="200.4204" y2="278.9292">
<stop offset="0" style="stop-color:#E52D27"/>
<stop offset="1" style="stop-color:#BF171D"/>
</linearGradient>
<path id="Triangle" fill="#FFFFFF" d="M159.845,191.73l106.152-54.999L159.845,81.348V191.73z"/>
<path id="The_Sharpness" opacity="0.12" fill-rule="evenodd" clip-rule="evenodd" fill="#420000" d="M159.845,81.348l93.091,62.162
l13.061-6.778L159.845,81.348z"/>
<g id="Lozenge">
<g>
<path fill="url(#SVGID_1_)" d="M392.928,62.226c0,0-3.839-27.073-15.617-38.995C362.371,7.583,345.626,7.506,337.947,6.59
c-54.975-3.974-137.441-3.974-137.441-3.974h-0.171c0,0-82.464,0-137.44,3.974c-7.68,0.916-24.419,0.993-39.364,16.641
C11.753,35.153,7.92,62.226,7.92,62.226s-3.929,31.792-3.929,63.583v29.805c0,31.791,3.929,63.582,3.929,63.582
s3.833,27.073,15.611,38.995c14.945,15.646,34.575,15.152,43.318,16.792c31.43,3.015,133.571,3.946,133.571,3.946
s82.552-0.124,137.526-4.099c7.679-0.915,24.424-0.993,39.363-16.64c11.778-11.922,15.617-38.995,15.617-38.995
s3.923-31.791,3.923-63.582v-29.805C396.851,94.017,392.928,62.226,392.928,62.226z M159.863,191.73l-0.018-110.383
l106.152,55.384L159.863,191.73z"/>
</g>
</g>
</symbol>
<use xlink:href="#youtube" width="30" height="21" />
</svg>
I'd like to use an SVG image as a CSS sprite through a content property, bootstrap-style, like so:
i.rectangle-image {
content: url(rectangle.svg);
}
and here's my SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect x="10" y="10" width="80" height="80"/>
</svg>
and proposed HTML:
<div><i class="rectangle-image"></i> Hello, world!</div>
I'd like to be able to re-colour the SVG in my application, for example to have the icon appear purple in some locations, and white in others. I know I can accomplish this by having three different SVG files (or data URIs) with the fill attribute set differently on the <rect> tag, but I'm wondering if there's a way for me to do this through CSS in my HTML?
I've tried adding a fill attribute to the i.rectangle-image selector, but that doesn't work.
I've looked at this answer and it's not quite what I want. They suggest embedding SVG throughout the page, and I'd prefer to do this via CSS content if possible. Any thoughts? Am I out of luck?
If you use the CSS content facility you're loading the SVG data basically as an image. For privacy reasons you can't affect how the image is displayed using external CSS or javascript.
If you want to change the contents of SVG data you'd either have to load it via an <object> or <iframe> tag or put it inline in the HTML file.
What abouth giving the SVG transparency and fill the background using css background color?
The sugested solution from #MMM looks great:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="13px" height="12.917px" viewBox="0 0 13 12.917" enable-background="new 0 0 13 12.917" xml:space="preserve">
<polygon fill="#000000" points="6.504,0 8.509,4.068 13,4.722 9.755,7.887 10.512,12.357 6.504,10.246 2.484,12.357 3.251,7.887 0,4.722 4.492,4.068 "/>
<script>
document.getElementsByTagName("polygon")[0].setAttribute("fill", location.hash);
</script>
</svg>
http://jsbin.com/usaruz/2/edit
http://codepen.io/Elbone/pen/fHCjs
You can use SVG Image Editor tool to edit the colors in front end and copy the code and use it where you wanna place it, which requires short time of period.. Try it surely it will work out