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.
Related
I'm looking for best solution how to implement .svg icons into web.
Basically, I need to implement just few icons, what I have in my .psd, so I can choose any format, but it will be nice to have vector so I've choosed .svg.
Only, the problem is that I need to change color of that picture and also I need to be sure that it will be supported on all major browsers, IE as well.
For now, I'm using tag < object > which works nicely, but I'm unsure about browser support and also I can't simply change color.
How would you solve this situation ?
The .svg icons are very small and simple, I've also thought to convert them into fonts or icons, but not sure about best workflow how to do it properly.
Also, I was thinking about using .pngs, but there is a problem with changing colors and of course "scaleabness", but if I will not find out anything, I will probably end up with this...
I personaly like working with fonts (like font awesome and so...), as they are scaleable, colorable.... and displayed everywhere
Is possible to convert and add these icons from .psd to such a format, that will be close to fonts ?
Thank you for your answers :)
Check browser support for the various ways to implement SVG at http://caniuse.com/
Common workflows:
Automatically process .svg files into icon fonts, usable in CSS, with Gulp
Automatically insert .SVG content into HTML as data URIs, with server middleware
Insert all SVG icons inline into a page and reference as SVG Symbols
Insert all icons into one SVG document as individual symbols, and refer to individually with svg 'use' - https://css-tricks.com/svg-use-with-external-reference-take-2/
So I've found a solution
I've generated my own fonts from .svg. As icons we're small, there we're no problem to work with them like fonts.
I've used
http://fontastic.me/
Very easy to work with, just upload your .svg, make some customisations like name of your fonts, mapping and add them into your page.
The best method is to use SVG code directly in the web browser, which is supported by almost all major web browsers. The SVG code can be easily customized with all of the CSS attributes, for example, you can use current Color for properties like fill and stroke color so that one can easily change the color of your free SVG icon from their CSS. This will also reduce the number of HTTP requests required to retrieve the image icon.
I'm looking at this site: http://www.calgaryclimbing.com/rates/ . On their footer they have very clean looking icons that link to their social media pages. I want to do the same using the same icons they are using. But when I inspect the elements It shows that they use an i tag and that the class links to some css code that uses the content property. I want to use the image icon so my questions are how can I get the image? And why was it programmed this way? Why not just use an image that you could click on?
I didn't check the link you provided but it's most likely a custom font just like Font-Awesome which you can use to put many kind of icons in your Web Site/App.
Font-Awesome use the <i> tag as well just like you explained.
Why using Font-Awesome?
As they say:
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 am running twitter bootstrap3, and I am extremely happy with the new way it handles the icon as fonts. However: I need some custom icons; I need to make them myself, and ideally integrate it into the existing font. I have searched with no luck. I am well familiar with illustrator, vector graphics etc, but how to integrate?
Worst case scenario, I will make images the traditional way, but hope there is a better solution.
How do I integrate a custom glyphicon with the existing (bootstrap 3) glyphicon font?
This process might be one option.
You could use the IcoMoon App. Their library includes FontAwesome which would get you off to a quick start, or you download glyphicon, and upload the fontawesome-webfont.svg
For your custom icons, create SVGs, upload them to IcoMoon and add them to the FontAwesome / Glyphicon set.
When you are finished export the font set and load it as you would any icon font.
Good luck!
UPDATE
If your imported SVG file icons seem misaligned after importing into the iconmoom.app, first check how they actually look when used on a web page. It seems to me that the preview may not always be perfect. Alternatively, there is an edit icon in the iconmoon.app tool bar which lets you move and resize.
If anyone is looking for an alternate tool to the one mentioned here, I've found Glyphter to be very useful. It is fairly straight forward and allows you to upload an .svg file, groom it, and add more glyphs from several other font packs. You can then download the entire bundle as its own font.
I merged a set of icons into one .png file and use css background-position to show these icons on a page, because img tags make a lot more http requests.
However, I need to show every icon in 2 different sizes: 20x20, 60x60. How can I do this without creating 2 separate .png files (20x400 and 60x1200)?
I am aware of the background-size property to scale the background image, but it is introduced in css3 and IE doesn't support it before 9.0.
Is it possible without using background-size?
The best way to do this is using "font icon technology" - you can read all about this in the web. Also it is helps when you need your markup retina compatible
Since you cannot use background-size for compatibility reasons you could try having both small and large versions of the icons in the same image. How you group them is up to you, but you should do some testing whether the increased size of the image still results in an acceptable load time for your pages.
+1 for icon fonts. You can do some pretty fancy things with them e.g. http://forecastfont.iconvau.lt/
I think that you could use "background:size" property. With it, you can "visually re-scale" background image.
Please look here
I was browsing different websites for some images that I'd like to use for links. One, for example, is a Twitter image.
Normally you can hover over an image and press "control + click" to save as.
But on this particular website, the images are icons and don't allow me to grab them.
Here is a screen of select element which the image I want highlighted, and the html and css that goes with it.
How would I grab this icon? The icons are on this website: https://uchaguzi.co.ke/
If you want to convert Font Awesome icons to png, you may use this software:
https://github.com/odyniec/font-awesome-to-png
however... if fontawesome fits your needs (it has a huge collection of really well-designed icons), I warmly suggest you to use the web font as explained here: http://fortawesome.github.io/Font-Awesome/get-started/