Single post in A Somewhat Extensive Guide to BBCodes
Forum Index > PokéFarm > Guides > A Somewhat Extensive Guide to BBCodes >
Now that's an interesting question... I'm going with v4 via CDN because things have gotten more complex in FontAwesome since then. But this was not exactly a beginner-friendly process, and is not one I'm confident I could explain well. (the biggest thing, is that I don't think I can @import cross-site CSS, and so I'm only including a portion of the full CSS file)
But there we go. So at minimum what you need is the entire font-face definition shown below, the entire .fa block, and then the specific icon block for each icon (in this case, just fa-paw). The icon-specific blocks can be found in the CDN's un-minimized CSS file. There's also like sizing and positioning blocks in there you could include, if you wanted - any time you added a "fa-" class to your icon [sc], you'd find its matching block in the CSS file and include that too.
I suppppose you could dump that entire CSS file, plus the font URL mods I made here, into a skin file, and then import that skin file each time you want to use the icons. I don't really love that, idk if it's "proper", but I guess it would work? As long as @import keeps working that is.
Code
[sc="fa fa-paw"][/sc]
[style]
@font-face {
font-family: 'FontAwesome';
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot');
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2') format('woff2'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf') format('truetype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-paw:before {
content: "\f1b0";
}
[/style]