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 )
Related
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've been using Font Awesome for a little bit on some of my projects and I have created a bunch of my own icons that I can link locally without a problem; however, I want to be able to link the icons I made from an online source like Font Awesome do and serve them publicly, how exactly is this achieved?
You need to have icon in SVG format that you have created,
then you can use this, it will generate all the necessary font types, CSS/Sass/Less/Stylus , HTML demo page and Name font according to your wish.
Gruntt Web Font
I did a bit of Googling for you to find somewhere for your to offer your files.
You will need to create a font from your SVG files, I use fontastic.me and it's very good, but you could use another service.
You will then need to create a package of your files, and put it on a CDN service so that other people (or just you) can use it publicly. You can try using something like https://www.jsdelivr.com/ or look into how to set up your own CDN.
I am implementing the Summernote Editor which rely on Bootstrap, but I usse my own custom stylesheet. This gives me 2 problems:
It breaks my design and the Bootstrap file is so long it is difficult to find the exact selectors causing the trouble.
It loads a 120kB file, when maybe just 20-30 is necessary (the part actually needed for the editor to render nice).
Does anyone know a tool (maybe online) to compare the actual used tags, classes etc. in the source code with the attached stylesheet pointing out what is in use?
Could also be helpful after a long developing proces, where you have made a lot of editing and you maybe ended up with a lot of un-used code.
Please right click and select Inspect Element while you are on your webpage on any browser.
You could use purifyCSS, which would require grunt or alike. There's this site https://unused-css.com/, which would require a URL of your site, it then would scan just a single page of that site. There's also this tool: https://sourceforge.net/projects/cssscanner/, which gives you list of used and unused selectors, but you need a machine running Windows to use.
I am using HTML2PDF and so far am having great results. I have stumbled upon a problem that I am wasting lots of time trying to solve.
I am using HTML2PDF v4.0 and I have managed to set the default font for my PDF's to a ttf font that I converted (into 3 files, .z .php and .ufm) These files were placed into the TCPDF fonts directory and the system recognizes them and the final PDF is generating with the correct font.
Now, the style guide I am working from specifies 2 different fonts. I need to use ANOTHER ttf font (also converted and placed into the TCPDF folder and verified by setting it as the default font)
I am having trouble finding a strategy for implementing this scenario into HTML2PDF. I am about to go down the road of splitting the ob_start() buffering into sections for each required font, then re-setting the font between outputs. A simple CSS class would be so much easier but I am unable to get this to work as expected.
After half a day of head scratching over this I managed to finally get it to work.
I have converted both of the ttf fonts using the web utility I mentioned in the question above. Then I was able to set a default font for the whole page using
$html2pdf->setDefaultFont("helvetica45light");
Then when I need to use the other font I just set an inline style similar to the following
<span style="font-family:helvetica65medium">some text here</span>
I went 1 step further, and created the classes as I was originally hoping for.
<style>
.helvetica65medium{
font-family:helvetica65medium;
}
.helvetica45light{
font-family:helvetica45light;
}
</style>
now I can just set the class of the text that I want in either of the defined fonts.
I guess I will count that as a lesson learnt
I am building a dynamic navigation menu in HTML 5/CSS 3 with all the new good stuff. Some menu nodes will have an svg icon, some not. In some views the menu levels are rendered differently depending on the user authorization level and so on.
So my question is: What would be the best way to store these icons?
Since each icon i connected to a navigation node, would it be appropriate to store the xml for the SVG icon in the database? Does anyone have any good recommendations?
I'm working with .net MVC3 MSSQL , but it is probably not relevant for this question.
best regards
//K
You really don't need to store them in database. These requests should lower the performance a bit and prevent browser cashing in some cases. Separate files do the job better.
Additionally, you should look into some practises of stroring bitmap icons in one file. Something like putting all the SVG's in one largee file and do tricks with background positioning like in this tutorial. I didn't try it with SVG, but with some changes like background sizing this method should do good job for you. Keep tring.
You could store all the icons in one file. This file would contain all SVG symbol definitions. Then, you could reference these symbols in your HTML like this:
<svg class="icon-home">
<use xlink:href="symbol-defs.svg#icon-home"></use>
</svg>
You can learn more about this method here: https://css-tricks.com/svg-sprites-use-better-icon-fonts/
Using this method, your SVG can be cached, and it would only require one HTTP request to load.
To get up and running with this method, I recommend the IcoMoon app. It lets you import and select your SVG icons and generates those symbol definition files.
I would store them as separate files.
They will be cached by the client and makes it easier to change the files if they need changing.