I'm trying to generate webfont from SVGs using grunt-webfont.
The issue is that I need this task to be valid on windows and linux machines. In order to achieve this I need to use the node engines that doesn’t work with some SVG files.
I would like to know if there is a way to convert my SVGs to a proper SVG format that will be supported by this grunt plugin or alternatively is there a better grunt plugin/s to achieve this
I would like to have a task that will be able to take my SVGs (created in illustrator) and output webfont files (.eot,.svg,.svg,...) and a css file (like icomoon export)
Thanks.
Perhaps your artboard is too small. I recommend checking that you have a 512pt x 512pt artboard for each icon. I stumbled upon this gem (https://www.fourdigits.nl/blog/using-a-webfont-to-display-icons) when the grunt-webfont documentation left me alone in the forest.
All the docs says is that it might not work with some SVG files. You really should try to convert your files first and then ask what to do with the files that don’t work well.
Related
What is an easy solution to insert rendered HTML (no source code) into a Pandoc Markdown or LaTeX file?
I want to visualize an architecture diagram and tried Tikz but hadn't much success in a days worth trying and I figured HTML essentially can do the same and I am already familiar with it.
Only problem I have, is that I haven't found a good way to import it into Markdown.
What I figured so far:
PDF seems problematic as you can only insert entrire pages and you don't have labels.
Images would work I guess but I haven't found any native solution
HTML and PDF are so different that images are the easiest way to bring one into the other. The best choice to embed a vector image in PDF is via another, cropped PDF "image", with a high resolution PNG being the second best option. Open source tools like ImageMagick or GIMP can help you with these transformations.
My slightly more general advice would be to use Mermaid diagrams in combination with Quarto. Mermaid is a very 'Markdown-esque' way of drawing diagrams and is supported by GitHub and the like, so it can even be embedded in README files. Quarto is based on pandoc but is more opinionated and has many addons and improvements built on top (including support for diagrams).
I want to believe that the best way of using icons in VS code is via the icon fonts extension (tell me if I'm wrong). Before now, I used to download icons in .png format before using them. The problem is that, the whole process of setting-up the extension (found in marketplace and open-vsx) for use doesn't seem to be clear (especially for a newbie like me). Please, I need a step by step explanation on how to go about this.
OR
If there exist a better alternative let me know. Thank you.
in my opinion, if you use an icon with a .png file format, then it will obviously slow down the performance of your website. do you already know about CSS framework that works with icons? I'll give you a few CSS framework references that work on handling the icons you need
https://fontawesome.com/
https://www.glyphicons.com/
https://materialdesignicons.com/
I would build my own font-awesome icons set. In particular I would build something which is a copy of font-awesome with all its features, but using just a subset of icons.
Furthermore, I'm really interested how they build files within the fonts folders.
On github I found this repo, which contains all svg icons. On ubuntu, using Font Custom, I was able to generate giving svg files as input, the fonts file, even if I'm not really satisfied. But besides that, I do not understand how to merge those files with font-awesome.
So summarizing, how can I create my own font-awesome set, using my own svg files?
Please, do not say to use fontello, icoMoon or similars, because I would like to do on my local machine, without any third-parties services.
I actually did something similar but have to admit it was never perfect, most likely due to bad font conversion, just never had time to make it perfect. Basically i used the following link (to the most part)
http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont/
An overview of the process
Step 1 - Create the individual gylphs (you should use the special characters to avoid someone "typing" using your font.
Step 2 - Save gylphs selection as an SVG font.
Step 3 - Convert SVG font to web-font (there are plenty of free online converters)
step 4 - generate the CSS classes to use (create all of the possible classes for all individual glyphs) - outcome should be something like: "icon icon-lg icon-blue icon-hand" - (better using LESS / SCSS for this part - you'll get why later)
where one contains the general settings for all icons, the other controls size-overrides, one controls the color, and most important one that using the :after -> outputs the icon.
step 5 - now that you have a working web-font controlled by CSS, make a UI for selecting individual glyphs to be available. most likely you should use LESS, this way you are "exposing" only the classes that are selected by the user (EG. - icon-1, 2, 5, 8 etc) all other icons are still included in the font but their corresponding CSS classes are not outputted in the final CSS.
There might be more advanced ways of doing it but this overview and tutorial should help you get the basics.
I believe you can use FontLab Studio for that: http://store.fontlab.com/
However, you will probably have to write your own css, personally I think generating it with icomoon or similiar web based generator is much easier and faster, because it is made particularly for generating web fonts, in before FontLab Studio or similiar desktop applications were made to design desktop fonts and do not come with prebuilt css compiler/generator.
I would like to see a generator for desktop aswell.
I haven't dug deeply with own font-icon sets, but I assume there's some svg data in use.
Just as an idea of a different way to go- you could even use background-img on set classes :before / :after
useful resource: http://iconizr.com/ I find their data-url generation is useful (better svg conversion than fontello, icoMoon )
I need to convert a local HTML file to a Jpeg Image in a C++ module. As per our requirement, I cannot use 'wkhtmltoimage'. Hence I need any command line tool or libraries( which can be used in C++ ) that are available for the same.
Any suggestion will be appreciated.
ImageMagick is able to convert HTML to images (by first converting the HTML into PostScript and then to an image), however it's definitely not the best solution. WebKit is really the best tool for the job here. I don't know all the details about your situation, but maybe try linking to WebKit and using it directly instead of invoking wkhtmltoimage?
I am looking for a command line tool, or a library (preferably in Perl) to download an HTML page and all its components: external CSS, external JavaScript, images, flash or other objects, etc.
I have not found a tool to do that. I could download the HTML page, and parse the HTML to find all the external links. But I'd rather not re-invent the wheel if an existing tool does that.
WGet may serve your needs, although I do not know about how it works with CSS.
wget will work easily, but ajax/xul/etc and similar issues it won't handle and for good reason.