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">
Related
I am using font awesome on my web application.
Although I use only one icon in one of my pages, all fonts will be downloaded which increase page load time.
And as you see in the image(the second font file) it's 80KB and takes 3S to load.
is there any way to decrease its file size and load time?
is it a good idea to subset it?
how about using SVG?
You can use icomoon as suggested for loading time.
For rendering time if you have icons that repeat a lot in the page, like in a table you can use what font awesome calls symbols.
<i class="fas fa-edit" data-fa-symbol="edit"></i>
<i class="fas fa-trash" data-fa-symbol="delete"></i>
<div>
<svg class="svg-inline--fa fa-w-20"><use xlink:href="#edit"></use></svg>
<svg class="svg-inline--fa fa-w-20"><use xlink:href="#edit"></use></svg>
<svg class="svg-inline--fa fa-w-20"><use xlink:href="#edit"></use></svg>
<svg class="svg-inline--fa fa-w-20"><use xlink:href="#delete"></use></svg>
<svg class="svg-inline--fa fa-w-20"><use xlink:href="#delete"></use></svg>
<svg class="svg-inline--fa fa-w-20"><use xlink:href="#delete"></use></svg>
</div>
source
I'm trying to use a symbol from my defs.svg as a background image in CSS, as opposed to a direct path to an individual SVG file.
So instead of:
background: url(spoon.svg);
I want to do something like this:
background: url(defs.svg#spoon);
With #spoon being a symbol in defs.svg with id="spoon". Unfortunately, this isn't working for me. Has anyone come across a solution that doesn't involve custom JS/etc?
You'd need to define view and use tags inside your defs.svg so CSS would know where to look and what to show.
So, for example, say you have inside your SVG a symbol defined as this:
<symbol id="poop" viewBox="0 0 100 100">
<!-- Your shapes here -->
</symbol>
And before closing the svg tag, you must add the view and use defining tags:
<view id="poop-view" viewBox="0 0 100 100" /><!-- This ID used here is what you'll use in your CSS! -->
<use xlink:href="poop" width="100" height="100" x="0" y="0"></use>
Note that at this point, you can open your raw SVG file in a browser and it will show your drawing - before it showed blank!
And now you can set your SVG symbol in your CSS:
div{background-image:url("defs.svg#poop-view")} /* Remember, it's the ID used on your <view> def! */
Also, be sure your SVG includes a xmlns:xlink namespace on the opening tag, or it won't be supposed to work.
Disclaimer: I'm trying to use this setup at work hosting the SVG file on a server on my university, but for some reason this doesn't work (even SVG files won't show if <?xml>and <!DOCTYPE> tags are missing on the SVG), so be sure to check the sanity of your SVG file.
Find more about this on Jennifer Hiller's codepen blog.
I have an SVG sprite symbol after my body in my WordPress theme:
<svg style="display:none;" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 104 64" id="icon1">...</symbol>
<symbol viewBox="0 0 64 64" id="icon2">...</symbol>
</svg>
and block with xlink use
<div>
<svg><use xlink:href="#icon1"></use></svg>
<svg><use xlink:href="#icon2"></use></svg>
</div>
It works on normal pages, but these icons are not displayed in Chrome (49.0.2623.112 Mac[64-bit]) when active WordPress customize preview (page load in iframe). In Safari it works everywhere. Is this a Chrome bug or can I fix it?
This seems to be a bug in WordPress with inlined SVG due to the fact that the page is loaded via AJAX in the Customizer.
If you use an external svg file with a full url it works:
<use xlink:href="/img/some-sprite.svg#icon1"></use>
Here is the corresponding trac issue I took this example from: https://core.trac.wordpress.org/ticket/35824
But please be aware that using an external source may result in problems with IE. See here for more information on that issue: https://css-tricks.com/svg-use-external-source/
You could also use the WP function is_customize_preview() to test if we are in the Customizer and only use external SVG in that case. Something like this:
<use xlink:href="<?php echo is_customize_preview()?'/img/some-sprite.svg':''; ?>#icon1"></use>
I am trying to resize an svg to the exact size which I want it (32x32).
Look at the example at http://jsfiddle.net/Uy94k/6/
This fiddle is a short outtake of a larger .svg file which I include in my html file and refeer to which image I want using:
<svg class="small" viewBox="0 0 512 512" preserveAspectRatio="none">
<g filter="">
<use xlink:href="#login"></use>
</g>
</svg>
(Any easier way to do this by the way?).
As you can see, I've tried using preserveAspectRatio, but without luck. I've also tried different styling techniques (ie. sizing in span tags outside the svn, styling in the svn tags, fiddling with height both in and where I call it by id.).
If you use a developer tool to look at the height/width of the images in the fiddle, you will see that it is 26x20.. But why is that?
Tweeking the viewBox values (guessing the value of viewBox="120 70 340 340" in this case) kinda did the trick. But it is error prone, not nice, and tedious to tweek the parameters.. Look at the example at http://jsfiddle.net/veZSX/1/ for a tweeked vs untweeked version.
There must be a better way?
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