What is the best way to add extra custom glyphicons to Bootstrap 3?
I see that the icons are now defined in a font.
As #Bojangles commented, you can go for forking the font and adding glyphs, but beware that font creation is a taxing job, especially if you are new to it.
For most common uses go with FontAwesome, or alternately you can create your image sprites and map new icon classes to this sprite.
Related
I can style a asp.net button using bootstrap, but is it somehow also possible to use font awsome icons together with some text so that I get a result like the one here http://fortawesome.github.io/Font-Awesome/3.2.1/examples/ (see buttons section)?
I've tried these 3 approaches out, and they all seem to give me the same result.
I tried to research to find out the different performance between them, I didn't come across anything so far.
<div class="col-lg-3"><span class="success-icon"> </span>icon</div>
<div class="col-lg-3"><i class="icon-circle-blank success"></i></span>icon</div>
<div class="col-lg-3"><img src="img/success-icon.png"></span>icon</div>
I'm wondering which way is the most efficient way to do and why ?
From a performance perspective, a sprite image set or font icon would be preferable to using a single image for an icon. Still, using too many custom fonts can create some performance issues if you use a lot of them and a sprite image set is not always easily applicable to every situation or design.
If using font icons, use something like Fontello to compile a custom font icon library that only includes what you need so that the size of your font library is minimal.
If using sprite image sets, use tools like Dan's Tools Sprite Generator to render your sprite images with different alignment and different spacing to make it work for your project.
Don't use single images for each icon.
I am now having a lot of troubles with Bootstrap. I used to use it to build a website once and then I have never used it again. But now, I have to use it. I downloaded the compressed version and include JS and CSS file in my project.
Here is the problem. I don't know how to customize it effective. For example, I create a navbar that is much higher (height:90px;) than the bootstrap default navbar. Hence, I have to modify the padding of the navigation panel on the navbar and when the navbar is collapsed, the items in this collapsible navbar are aligned incorrectly due to the padding and margin modification for the large screen.
I have one solution in my mind. May be I have to modify the media query padding and margin or if you have other effective ways to do it. Please tell me.
Create a file with overrides that you load after the bootstrap file. The override file will redefine the bootstrap classes you want to change. It's important that you load the override file after the bootstrap file.
Just linking Your own CSS file, and insert your custom class to the element. And then styling your custom class & avoid to override default class provided by bootstrap itself. This is my practice when using bootstrap or another CSS Framework.
Never have problem so far. Good luck for your project.
I find Bootstrap insufficiently flexible. For example there's not a straightforward way to change font or line-height properties. I want a one-line method to change these properties.
What else can I use similar to Bootstrap (that I'm sure will not be as rich)? I just need some style collections that are flexible for those kinds of changes.
You can change all of the typography values (and pretty much everything else) on the Customize Page. The links are in the toolbar at the top of most pages of the Bootstrap site.
Is there a better way to change few images from a single file which was generated for CSS Sprites.
As I have a big image file which contains 50 small images and my css uses Sprites. Now I wants to chage 4 button's colors and size of s pointers. What will be the best possible way?
Use any CSS Sprites Generator like Spritemapper.
BTW, I create ZeroSprites which is an online sprites generator aimed at area minimization using VLSI floorplanning algorithm.
Edit your sprite file in a image software like Photoshop or GIMP.
Add new images on the bottom of the existing sprite file. That way, you can keep the existing positions of your sprites.
If you want to find to the css pointers, use the measuring tools in your image software.