Does anybody know a open source/free, 32x32 or bigger, complete set of "office" icons for integration in a Rich Text editor - i.e. buttons like
Copy
Paste
Text color
Background color
Bold / Italic / Underline
?
You should look into the Tango Icon Library, it looks great and it's into the public domain (as noted in their FAQ).
The have the same icons in 16x16, 32x32 and 64x64 but they also gave you the svg source, so, you can easily get any dimensions you want exporting them with Inkscape
You can also use the LGPL Crystal Clear as recommended by cobbal.
have a look at http://commons.wikimedia.org/wiki/Crystal_Clear
32x32 or Larger
The Best Vector Icon Sets All In One Place
21 Best Icon Sets for Designing Web Apps
On 2 I think this one might be what you want: WeFunction Free Icon Set
16x16 Icons
You should be able to find icons to suit your needs here. I use this page as a reference all the time when looking for little icons:
All the Small Icons You’ll Ever Need by the Web Design Ledger
another great one that is not listed.
http://p.yusukekamiyamane.com/ is a free icon set with 3160 icons atm. they are 16x16 and some are animated gifs.
Some one in my team uses this. Ico fx. I have never used it my self but the icons always look good.
If your project is non-commercial, then look at this nice spherical Icon set.
If your project is commercial, I'd suggest that a hundred bucks or so would be a good investment :-) eg. something from the Text bundle at IconShock.
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/
Hello I have a client who's logo is RP but the 'R' is facing the other way. I have been asked if it is possible to display 'RP' every time it is mentioned on the website to appear the same as her logo, instead of 'RP'.
My initial thoughts this was not possible but I have used font-awesome icons in a similar way in titles, but never using an image. This is an example of what I mean using photoshop.
Image Link: http://imageshack.com/a/img537/4474/guj5uS.jpg
I am very wary using this method at all as it must be made responsive etc and I honestly think it is more hassle than it's worth but maybe I'm missing an easy css trick...
Your help would be much appreciated.
Many Thanks
If you can contact with a graphic designer then the designer can make a svg image for you with "RP". That svg you can easily turn to a font using online font converter if you dont have professional software.
And insert the costum font you have created on your website just like inserting font awesome and/or all other icon fonts.
Is as easy as this ... nothing else that needs to be done, but always if the "RP" is in svg format (if you have a graphic designer at your disposal, or if your client can give you the RP logo in svg format).
The simplest approach is to use an image and scale it with CSS to suitable size. For best quality in scaled size, you would create the image in SVG format (there are online tools for converting other image formats to SVG, though ideally you should use an SVG file created by the artist who designed the logo). If you need to worry about old browsers (IE 8 and older) that do not support SVG, you can perhaps set content negotiation in the server so that its sends SVG to modern browsers that announce SVG support and PNG to others. But using just SVG:
<p style="font-family: Times New Roman">This is example text that
contains the logo
<img src="http://www.cs.tut.fi/~jkorpela/upload/RP.svg"
alt=RP style="height: 0.7em">
as an embedded SVG image. The height of the image is set to
0.7em without setting width. This means that browsers will scale
the image <img src="http://www.cs.tut.fi/~jkorpela/upload/RP.svg"
alt=RP style="height: 0.7em"> so
that is roughly of the same height as uppercase letters
and does not disturb line spacing.</p>
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.
Is there a free and easy text-only favicon generator? There are numerous online favicon generators asking for a image+text to create a favicon. I am interested in putting only text into my favicon, probably with a choice of different fonts. Anybody knows of a a good online text-only favicon generator?
Also, any desktop solution that does not involve paid software will also do. Does anybody know of such an option (I use a MAC)?
A simple only solution is http://antifavicon.com/
Not the prettiest favicons, but very simple, with a retro look ;)
I have found one site which exactly does what you want, the site address is https://favicon.io/. (see the image below)
It can generate 16X16 and 32x32 favicon image. It can also generate a 1024x1024 png image. You can use this site to generate various favicon from the big image.
I don't know a good online one, but why not just boot up MacPaint and put some black text on a white background? You could save the result as an image in the right size yourself, or upload it to one of the generators to get the sizing and formatting done for you. Your font choice would be quite large, as you could use any of the free fonts available on the web.
http://www.animatedfavicon.com
With this one you can generate an animated gif of a scrolling text (and an icon).
It's very easy to use.
Rename the gif to favicon.ico and put it in the root folder of your webpage.
For the "no icon" part. Simply use a 16px white gif as "icon"
alt text http://www.animatedfavicon.com/iconz/5d7acd6919b25b7651ee9bd9fefbbb69_extra_animated_favicon.gif
http://faviconist.com/
It has nice font collection and simple color scheme.
Faviconist is a Favicon generator with a difference: No need for image
uploading or editing. Just provide a letter (or another character) and
a color scheme, and we'll make the icon for you. Click "Save Favicon"
to keep it.
Personally, I would just boot up some image editor and make a 16x16 png image, then use the png image as the favicon. It doesn't have to be an ico file, and even if it does just convert it using something (I don't know what software would do this on a mac, gimp maybe?)
No matter what it's going to be an image, but if you want the image to just be a letter or something you can do that.
I think this is the easiest way:
Open up Microsoft's Paint.
Type the texts you want.
From Paint's menu, "Resize" by "Pixels" to 16x16.
Save image as .png to get a clear background.
Go to http://www.favicon-generator.org/
Follow favicon-generator instruction accordingly.
Done!
I get a .pdf complete with images, fancy fonts, styles, gradients and what have you. Basically it's handed off to me with the message, "Make me a web page that looks exactly like this." I've tried a few pdf to html tools and they all look terrible. I figure I've only got 2 options and i hate them both.
convert the pdf to one big image and use an imagemap to add the links.
the screen copy tool that comes with acrobat reader to chop the file up into it's parts (buttons, logos, etc).
She uses Quarks to make this pdf. I've never used it, but I hear it is very popular. Are these really my only two options? Someone tell me I'm wrong, please.
Grab what text you can out of the PDF and clean it up. Pull the PDF into Photoshop and slice out the graphical elements you want to use. Rebuild the page using the images and put your text in HTML format.
Make a slice of the gradients and use them as background images with repeat.
Try to explain to your client why the fancy font is unsuitable for this medium.
Edit:
If it's just going to be a screen shot, you might as well just put the PDF up in the first place. At least people can zoom in.
Do not use one big image map. The more content you can convert from image to text, the better (more efficient) your HTML page will be.
Chop up the PDF into parts. Make the logos, etc. images, make text plain text, and make buttons button controls.
Exactly like what Diodeus said except-
-
Find the fancy font and check to see how much it will cost to license or buy it. Build two bills and send them to your client, one with the fancy font and one with a standard font. Then see if she wants the fancy font. It will show that you take your job serious and may get you less strict project conditions.
No they are not:
Adobes Online pdf to html service
or
pdftohtml