Can I add my own icon to font-awsome? I see from the site that I can post icon requests to github issues, but I did not see any relevant links.
I have looked at some of the pull requests and I see that font/fontawesome-webfont.eot, font/fontawesome-webfont.ttf and font/fontawesome-webfont.woff are binary files.
Where should I start looking?
Thanks
As you saw, Font Awesome icons are all in a custom font that the creators control. If they won't accept your icon suggestion, you can create your own icon font. Please see this. The IcoMoon.io site they mention seems particularly interesting, but I have not used it yet.
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 find a lot questions about Problems with not displayed Icons of Awesome font. But they didn't match my specific Problem.
I try to implement in my website a project from heise.de, called Shariff. Shariff enables website users to share their favorite content in social networtks without compromising their privacy. To realize this not the common Share- or Like-Buttons of Facebook, Twitter etc. are used.
In this project Awesome font is used for example to show the known symbols of Facebook, Twitter etc. near the share-buttons. The Awesome-font is implemented in the file shariff.css by #font-face. I have downloaded the font v=4.6.3 and have installed it on my webspace.
When viewing my demo-site with iPhone/iPad (Safari) or Chrome, I can see the symbols of Facebook, Twitter, LinkedIn, etc. But in IE11 not. To check out if my CSS has some bugs I replaced for example the twitter-symbol by an normal charakcter::
Instead of:
.fa-twitter:before{content:"\f099"}
I used:
.fa-twitter:before{content:"tw"}.
This is working in IE11 and I saw 'tw' before the tweet-button.
I searched the web in the last few days to find a solution for this problem in IE11, but can't find anything that works.
I guess there must be something wrong in the shariff.css where I implement Awesome font via #font-face, but I can't find the bug. So I hope someone here can help. Please be lenient with me if its just something like a missing space, bracket, etc. I'm blind and have to read the CSS-file with an voice-synth, that is in this case a bit difficult.
You will find my test-site and the CSS here:
http://www.sensitive-tiertherapie.de/test/index.htm
http://www.sensitive-tiertherapie.de/test/css/shariff.css
Unfortunately this website is in German, but if you scroll down to the bottom of that site you can see the share-buttons.
I would appreciate if someone could find-out, why it doesn't work as it should.
BTW: I hope my question will be displayed ok, because the handling of this site by screenreader isn't very smooth.
Kind regards, Michael
Many thanks for your feedback, I get the solution:
It was a local accessibility setting of IE11 in:
Extras -> Options -> General -> Accessibility
Here was "ignore fonts on Website" selected. After I turned off this setting, the icons of Awesome-font appears as expected.
So if anyone get into the same trouble, check
1. compatibility mode of IE11 and
2. accessibility settings.
I am using Font Awesome. If I use various icons, like the calendar or the speech bubble, they all work.
However this one appears not to work anymore.
If I change it to the calendar or others, they show. When I change it to this one, it fails. Any ideas?
Your library is too old, change version to at least 4.4.
This Problem is due to the updation on font-awesome file.Update your font-awesome .
The sticky note options (fa-sticky-note and fa-sticky-note-o) were added in Font Awesome 4.4. Once you update your Font-Awesome files, those glyphs will properly render for you.
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