How to maintain an icon font from SVG files - css

We have an icon font (and relevant CSS code) for an icon font pack. However we need to add more icons to the pack or edit some of the current ones.
The question is: how can we do it without having an expensive font-design software? We've bought Glyph Mini for Mac but it would be great if there was a free service that you could just go there, upload your SVG files and get a new font file. That way you could have a directory full of SVG files and when you edit or add something, you can "compile" your own font. It would be even better if there was such compiler that we could use from command line. However, I haven't seen such tools.
Anyone aware of neat free solutions to this problem?

I'd suggest you to use gulp-iconfont or even svgicons2svgfont/svg2ttf/ttf2eot/ttf2woff/ttf2woff2 for pure CLI toolchain, see https://github.com/nfroidure/svgiconfont/blob/master/package.json#L7.

I have recently discovered IcoMoon app. It is free and I think it is great for what you need. Here is the link: http://icomoon.io/app/

I usually use: IcoMoon
You can combine free fonts and also add yours, give it a try,

Related

How to copy only used CSS in developer tools

I have CSS file with a lot of unused CSS lines.
And I want to clean CSS file but not manually.
In browser developer tools I can see (unused/used) CSS but I can't clean file and copy just used CSS.
enter image description here
I think a CSS minifier tool is what you're looking for. There are online tools to help with this. Check out this other answer to see some options. I would recommend using this after you are done with development, otherwise it might make it harder to read.

It is possible to find out which font in psd is using gimp? Or using another app on ubuntu?

Need to find out which font in psd is, using gimp. It is possible? Or please tell how can i do it maybe with another app on Ubuntu?
I had the same problem some time ago using Gimp: unfortunatly it rasterizes .PSD fonts, rendering them as images, so if you are looking for some free tools, I've created a PSD fotn extractor from Melitingice Github project psd.js.
If you need more than just font info, I've started something more complex here, with layers and image export.
hope it helps
You can use App and also browser:
https://avocode.com/

Clone CSS styling for Google Docs

I am making a Google Apps Script for Google Docs with a side panel.
I would like to match the style of buttons, scroll bars, etc. that Google Docs has.
FYI, a lot of the CSS seems to have be minified/obfuscated.
scb-button-icon
jfk-star
Where might I find such a thing?
I would have thought Google Apps Script might have provided something like this, since consistency makes the UX better.
If the official source is not available, is an unofficial one available?
EDIT: Sidebar CSS is now freely available, see CSS Package for Add-ons.
For research only, of course:
View Source of the page you wish to research. Copy and...
Paste into a text editor. Remove everything up to and including the <style> tag, and from the </style> tag to the end. Copy and...
Paste into an HTML decoder, to remove the encoding. Now you have all the CSS, it's just badly formatted. Copy and...
Paste into a CSS Formatter, and tidy it up. Optionally, output as a file.
At this point, you've got a CSS file that can be experimentally built into your for-personal-use-only app. Browser inspectors are handy for determining the HTML others have used to produce the UI elements you want to learn from.
Here's my own little experiment, a sidebar in a Google Doc, with an assortment of elements:
Not sure if you'll be able to find the source code, so here is an alternative:
CSS Unminify
This tool will take minified CSS and expand it. This will allow you to at the very least read the CSS and hopefully figure out which rules you need.
If copyright infringement is not an issue then you could simply recreate the design that Google adopt for their buttons. It should be fairly simple with CSS. The font Google + uses is called Roboto and is free to download
I talked to some of the guys at Google and got a alpha version of the CSS.
It does not yet, however, completely support IE or Firefox, and has (very minor) differences, so I accepted Mogsdad's answer.

code coloring in dreamweaver like aptana studio 3?

I'm wondering if anyone has found a dark code-coloring theme for dreamweaver that's modeled after that in aptana studio 3? I've searched on this forum and elsewhere, and I've seen solutions to achieve DW code-coloring in aptana, but not the reverse; the default aptana 3 color theme is very pleasing to the eye.
thanks for any direction here; I may just go ahead and make one myself, in which case I'll share it here.
I made it to look like Aptana Studio. :) (Dreamweaver CS6)
Not 100% looks like that but still I think It's worth sharing it.
It will work in CSS, JS, PHP and HTML only.
Dreamweaver CS6 Aptana Studio like color theme
You would think that someone would have created an extension to allow easy importing of color schemes by now but that still doesn't appear to be the case.
You can always set it yourself by going to Edit | Preferences | Code Coloring and setting the options there. It's time consuming but certainly possible to replicate Aptana's settings.
Alternately, if you Google for it you should find several people offering a dark-themed colors.xml file to download from their site. You can backup your file located in either
C:\Users\%username%\AppData\Roaming\Adobe\Dreamweaver\en_US\Configuration\CodeColoring
or
/Users/%name%/Library/Application Support/Adobe/Dreamweaver/%localization(en_US)%/Configuration/CodeColoring
for Windows and Mac respectively and replace it with the downloaded version. That will change your DW interface to use the color settings in the other file.

Is there a standard web-based font that is similar to Malgun (Korean font)?

A client needs to have Malgun as the font whenever hangul characters are present. I'm trying to find something to use in CSS that is close to it. I was thinking Verdana. Anyone else have a suggestion?
Verdana is also looking closer to Malgun, I think you should try google fonts http://www.google.com/webfonts
There are no "standard web-based fonts", only fonts that are more or less probable to be installed on the computer, where the browser is running. You may try to build a font-stack, that comes close to the one you want, e.g. the Verdana based font stack from this Sitepoint article, and then use font-loading methods like Google Webfonts to load your defined font for browsers that support loading fonts.
Do not try to give each visitor the same experience, but the best experience possible. Tell your customer, that a website is not a application that looks the same everywhere, but more like a TV program, that must be viewable from a black and white TV also, see this video.
Have you thought about using Fontsquirrel #font-face generator ? Also, for hangul, you might be interested in reading this.

Resources