How to install and use VS Code Icon Fonts - html

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/

Related

How to host your own icons

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.

Building font-awesome icons

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 )

HTML hosting with live collaboration

I was wonderig, if it is possible to work on code simultaneously. I am currently creating stylesheet with co-worker and i need a possibilty to preview the website online. Things like git are not efficient enough. Google Drive would be awesome if it only supported syntax highlighting and previewing.
Koding would provide exactly what you want.

Restore Primefaces 2.x look and feel on some components

One of the web application I developed uses Primefaces 2.2. I'm delaying the migration to 3.X because I think the users are more comfortable with the 'old' look and feel of some components.
In the calendar I liked the 2.2 icon on the popup button and I would like to go on with it. Unfortunately it seems the easy way to achieve this goal, the attribute popupIcon, is no more supported, despite it is still present in the guide for 3.X
FileUpload was completely rewritten and its look is radically changed: now in the auto mode the browse (choose file) button is inside a rounded box with a background image and color set. I preferred the 2.X look, where there is no rounded box. Besides making some tests with Internet Explorer 9 I noticed the UploadedFile.getFileName() gives now the full path of the file, while I have functioning code expecting only the file name without path. The migration guide tells nothing about this change which is completely undocumented.
I believe the original look and feel can be restored with some css override, but I have already tried without success reading also this
Primefaces: how to change the default icon on the button of the calendar field?
and I would like to receive some advices.
My major concern is that css modifications can affect other components, so it is necessary to be very specific.
Thanks
Filippo
I don't think there is a quick fix, in fact I think it will be a lot of work. As you said yourself, the look and feel for some elements has changed a lot. However PrimeFaces is highly customizable when it comes to styling.
I suggest you download the manual from the PrimeFaces site (PDF) and get to work using CSS as your weapon of choice. Maybe you can re-use the CSS of PrimeFaces 2.x as a reference.

CSS + FONT + Image replacement

I stumbled on a site yesterday and forgot to bookmark the url. I'm stumped though because google is not helping me trace my steps. The site was basically a text to image converter for preserving your specific fonts in the browser. What made this one unique was that the text was fully selectable, however what was being displayed was the image that was generated using the desired font.
They required a subscription to their service so I disregarded it and moved on. Turns out I left too quickly and I'm interested in trying the product now. Does anyone know what website I stumbled upon, and if they have experience with it?
BTW, I'd recognize the link if I saw it. It was something like freemefont.com or something like that.
Thanks
You may mean cufón: Take a look here. It's at least something like you describe, you upload fonts, and it generates javascript to render the same or as close as possible I guess, as those fonts would.
I'm using TypeKit for that - they don't really create images, but rather supply a font via CSS.
Here's a list of commercial webfont service:
fontspring
kernest
typekit
typefront
typotheque
if it's not one of these you stumbled on you can try the free alternatives (harder to setup) listed in the other answers.
Ill add to the (free) ones already proposed a php based one:
PCDTR
Do you mean Facelift? http://facelift.mawhorter.net/
Another alternative, which I'm pretty sure you don't mean, is sIFR: http://wiki.novemberborn.net/sifr/
these links should help you out
link1
link2