I've seen some old posts here regarding the subject and i was wondering perhaps there is any new way to control the thickness of Font Awesome icons,
besides using -webkit-text-stroke.
Related
I was searching for a new icon in https://material.io/icons, and I found a renovated icons with outline, baseline, rounded, two tones, and sharp versions. So, I want to know If somebody knows how to implement the new icons in that versions, also we can animate that icons. When I try to copy the tag in any version, I obtain de same tag, and my web look like normal, not renovated.
https://material.io/tools/icons/
It appears to not have been implemented yet, here is the GitHub issue:
https://github.com/google/material-design-icons/issues/773
How does one use a glyphicon without using bootstrap?
I like one particular glyphicon. It's called glyphicons-chevron-left. All it gives is this
<span class="glyphicons glyphicons-chevron-left"></span>
I've downloaded the free version and found the .png I needed and used it as such:
<input type="image" src="images/glyphicons-chevron-left.png" class = "back_btn"/>
But then, when I give this button height and width the image loses quality. I was wondering if there is a way to do it better?
This is because Glyphicon is a font: one file containing all the icons in special vector format which allows resizing (if you resize a png image it will become ugly).
You can directly download the Glyphicons on their website or even create your own set of icons if you only need some by using a tool like Icomoon (maybe Icomoon does not offer to select icons from Glyphicons, but you will surely find equivalent icons in other sets).
You have three options other than the one you have already tried.
SVG
You can use an SVG image rather than a PNG, which will not pixellate as you make it bigger or smaller as its a vector.
The disadvantage of this is some older browsers don't have SVG support (IE 8 and below I believe)
FontAwesome / Other icon font family
These are cross browser compatible so you won't have that problem. However you will have to load in an entire font just to use one character. Which probably isn't ideal. It is still better than loading in the entire bootstrap css library though.
Customise Bootstrap
Alternatively your third option is to head over to bootstraps website and customise your build and just include the glyphicons icons.
is there any possibility to change the color of glyphicons from bootstrap v2.3.2 without the migration in bootstrap v3.x?
I use, for example, this class:
<i class="icon-edit"></i>
I would be happy, if you can help me.
Greets,
Glyphicons in Bootstrap 2 are based on a PNG sprite. The only options you have that I see are:
changing the image itself and replacing references to it in Bootstrap's CSS
resorting to very exotic css features to change an image's color, though I'm unsure if this will work for glyphicons
In short, you can't really. Black and white (-white versions) are your only options.
As mentioned in the comments, this will be very hard to achieve in that version of bootstrap.
I'd recommend using Font Awsome
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
I have my own custom SVG. I have font awesome working on a site I own. I'm not familiar with exactly how it is installed etc. Are there any really basic instructions on how to add an icon to it please?
I am reading and trying these instructions here http://spin.atomicobject.com/2012/12/16/create-your-own-font-awesome-icons/
I love me some Font Awesome, but the page that shows all the icons isn't effective for browsing.
In Chrome on OS X all the icons are very small, and trying to scan through visually to find an icon I want is difficult.
I'd love to browse all the icons by themselves, on a page where the icons are more on the range of ~20+ pixels wide. Merely increasing the zoom level in my browser just doesn't help. Does such a display exist?
Try GlyphSearch.com
Displays glyphs from a few different libraries, is searchable and can copy the class directly to your clipboard.