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.
Related
How do the icons with the following structure work?
<span class="material-icons">
accessibility_new
</span>
I have been poking around the Material Icons repo trying to understand how the icon is determined by the content of the HTML but cannot for the life of me figure it out.
I suspect it has something to do with the actual font files, but when I try to open them in Font Forge nothing loads.
EDIT: I understand how to use Material Icons themselves, but I am trying to understand how to recreate this functionality with my own icon font.
Generally with this, you would have run:
npm i material-icons
so they would live in your project (look at your package.json file!). So, when you specify a certain icon like accessibility_new, then you are simply referencing the library that lives in your project folder. Does this answer your question?
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.
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 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!
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.