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/
Related
This is mainly a question about the quality of logos/icons used in Websites. I create logos/icons using Illustrator but when I see icons on professional websites (see image and links), they look crisp like a text, with no blurriness. The edges are very clear. For example, please see this image, especially the search icon and the menu list icon:
This is my own Blog that has bad icons, the Logo and the Menu icon. Both of them are PNG images.
This is Entrepreneur website with awesome menu icon and search icon. If you check the Inspect Element for mobile site, you'll see that the search icon and menu icon are not images (I don't know actually the reality). It is using a pseudo element. How does it work? Maybe this has something to do with quality.
Same is true with TimeofIndia website. Here the menu icon is made using hr tag, so it's obviously great, but still the search icon is beyond understanding as it is using a pseudo element.
And another scenario is related to this Business Insider website's technique. I've seen it at most of the websites, especially Facebook like sites. They use a single image for all icons. How's it possible? If you don't understand please visit this website and check the URL of the menu and search icon's image. How's it done?
So first I would like to know how these things work? How these icons render?
Secondly why I'm not getting the quality like them? Should I stop using images like them? I'm asking this because I've tried exporting in many ways using Illustrator, with same dimensions as required, but still quality sucks. If you can see, in my own blog's (Blog) mobile site, the middle horizontal bar is blurred despite the original image looks awesome before upload. Why is that?
I think these are too many questions. I would appreciate if you can provide suitable links to understand these things fully, if explaining them here is not easy.
Thank you.
If I could, I'd give #marc-b five upvotes :) The first step, before coming to SO, should always be trying to solve the problem yourself. Then you can come to us with an on-topic question. Here, that first step is to right click on one of the icons you're interested in, and choose "inspect".
There are a couple questions here: what are some ways of making crisp images?, and what's the deal with having multiple images in one file? Both of those are very Googlable, but I'll give you a head start:
Two common ways to make images crisp are:
SVG (vector graphics - as an Illustrator user you already know about the difference between those and raster graphics, and why they're crisp. If not, google "vector raster difference")
2x images - the technique here is to make an image twice the final display size, and then use CSS to shrink it down. The in-browser scaling will have a crisper result that just displaying a 1x image.
Having more than one image in one is called a "sprite." You can have a raster sprite or an svg sprite.
Here's an intro to svg https://css-tricks.com/using-svg/, here's an intro to sprites https://css-tricks.com/css-sprites/, here's an intro to svg sprites https://css-tricks.com/svg-sprites-use-better-icon-fonts/, and here's an intro to the latest thing, srcset https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
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
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.
I'm wondering how to replace my social media icons with my own custom images. For example instead of using the typical Facebook Like button or Twitter follow button I would replace it with my own image, while keeping the same functionality.
Websites like BuzzFeed and SuperCompressor are good examples that it can be done. Each has replaced the Facebook Like button with a custom image but the functionality remains the same.
I'm having a hard time finding any information one the web. Can anyone guide me in the right direction?
As the place you will find this image may depend on the plugins and themes you use, you have to find out where the actual image comes from.
To do so, I would suggest that you install a browser such as Chrome that allows you to inspect an element on your page (will open the portion of code displaying the selected item). Once you see where the image comes from, you can either replace the actual image with a custom one if it's on your website's server, or search your website files for this image's URL and replace it with a link to the image of your choice.
I think something like
this http://www.inboundnow.com/apps/facebook-like-button-generator/
might work but the google search for
custom facebook like button for website
has a lot of results
EDIT: Well if you already know how to make a custom image you can follow
https://stackoverflow.com/questions/9493988/how-to-trigger-facebook-like-button-from-custom-button
to make your custom image into a facebook like button
`http://jsfiddle.net/masondesu/haxvL/`
This site also has some info
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.