Font-awesome is limited to one font or ?. Is there any option to add custom font to font-awesome.
If yes then, show me how to add that.
FontAwesome is a collection of icon fonts. If you want a collection with different icons one easy way is to use IconMoon - http://icomoon.io/app/#/select and http://icomoon.io/#icon-font . Their IconMoon app is brilliant and hooks into a world of different options.
If you want actual web fonts, then it's hard to beat Google Web Fonts or Font Squirrel if you want to use your own fonts
Related
I just purchased FA-pro, and I tough semantic had a way to use it, but it is nowhere documented.
Any way to use Font awesome pro with semantic-ui ? (I'm using SUI React, but I already did an Icon wrapper to directly use SUI).
Semantic UI has CSS compiled for the basic Font Awesome. That doesn't mean you are prevented from using whatever you want though. However, the name prop on Semantic UI React's Icon component is only going to help you validate for icon names in the free set.
In this case, the way you may want to go is just to include all of the styles that come with Font Awesome's Pro set in your project instead. You can still use SUIR's Icon component but you would define your icon classes with the className prop instead.
Take a look at Font Awesome's basic use docs.
Once you include your pro fonts and css in your project's build process (whatever that is) then you should be able to do this: <Icon className='far fa-stroopwafel' />
I am not using the pro version of font awesome, but I usually just do this
<Label size='medium' color='green'><FontAwesomeIcon icon='dragon'/> Powerful for gaming</Label>
This will create
I want to use the font 'Semplicita Pro' from the site https://worldofwarcraft.com/en-gb/ for my own website project but I can't seem to find the font file on the website. Even if I should be able to get my hands on the file, would it be legal to use the font?
No, this is premium font which could be bought there:
https://www.myfonts.com/fonts/canadatype/semplicita-pro/
This is kind of expensive. Maybe you could use one of the alternatives to this font?
https://www.typewolf.com/google-fonts
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 currently working on a responsive page which uses unicode symbols on certain elements and I would like them to have the same "look". As I understand, each browser and each operating system have different fonts for unicode symbols, and I noticed that the font-family property was not helping.
My biggest problem right now is that all the unicode symbols that I use show up as colored emojis on smartphones, which often ruins the page's design. Is there any way to fix that? Am I missing something?
The answer to your question can be split into two:
How to not worry about client-side fonts: web fonts
How to use emoji/pictograms without browser changing the rendering: css icon font
The latter part is more relevant as you are specifically dealing with emoji.
Web fonts
Web fonts would solve the cross-system compatibility issue. These are fonts that are served to the browser. Google fonts is a good place to start —it is actually weird to see how much of the web uses them.
If your unicode is more than just Greek or CJK and uses, say, runes, you will need to make your own web font (which is easy, Googling gives many web servers and guides), which takes advantage of #font-face rule (wiki). One serious drawback to the latter is that there is a copyright problem if you use a font you found on some depository or on your machine, so that is something worth looking out for.
Icon font library
An icon font library is a stylesheet library (with a font) that inserts an icon after an empty element with a class named for that icon, e.g. in FontAwesome <i class="fa fa-hand-spock-o"></i>.
As emoji are a recent addition and the support is more than patchy, websites and browsers add the support themselves, often coloring them (e.g. Chromoji extension). Consequently, I strongly suggest using an icon font library.
I am partial to FontAwesome —e.g. an academic tool of mine—, but there are loads of other options, some are:
Bootstrap's Glyphicons
Typicons
Fontello allows a mishmash of various icon font libraries (a longer list can be found there).
If however, the icon you are looking for is absent, you can create an icon font library using one of the many web resources (eg iconmoon.io). For the images themselves, flaticon has large collection of icons that can be converted to a icon library, which saves you time from having to slave away in illustrator.
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 )