Using font awesome pro with semantic-ui - font-awesome

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

Related

Is there a way to use font awesome in marp slides?

Everything is in the question. I wonder if there is a easy way to include font-awesome icons/character into a slide deck using marp ? For example using an inline and local marp directive ?
On a more general point of view, is there an easy way to add arrows or things like that in the presentation?
I once managed to get icons included using the following line of code, which needs to be placed after the </style>-tag.
<script src="https://kit.fontawesome.com/8b20b734d0.js" crossorigin="anonymous"></script>
FA-Icons can then be included in your markdown text using :fa-flag: for instance.
However, with the latest version of font awesome and/or marp-cli, this solution stoped working – at least for me, but it might help others.

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.

Font Awesome Stick Notes not showing

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.

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 )

How can i add custom font to font-awesome?

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