Optimize Font Awesome for only used classes
Sass has no idea what classes you are actually using. This is something you will have to manually trim down yourself. Open up the provided .scss file and hack out anything you don't need.
Editing the font file itself to eliminate unneeded glyphs requires a 3rd party application to do so and is beyond the scope of this question.
Fontello is an online web service that can do all of this for you. It lets you mix and match between multiple icon font collections to create the perfect font file for your project. In addition to the customized font file, it provides multiple .css files containing styles already generated for you (changing the extension to .scss will allow you to import them into your existing Sass project).
SASS Optimize Font Awesome for only used classes
How to tell FA what to compile
Using SCSS (SASS CSS Formal Syntax)
- Download and extract
font-awesome-4.x.zip
- Navigate to
./scss
- Open
_icons.scss
- Remove the desired glyphs
Ex:
.#{$fa-css-prefix}-times:before { content: $fa-var-times; }
.#{$fa-css-prefix}-search-plus:before { content: $fa-var-search-plus; }
.#{$fa-css-prefix}-search-minus:before { content: $fa-var-search-minus; }
.#{$fa-css-prefix}-power-off:before { content: $fa-var-power-off; }
.#{$fa-css-prefix}-signal:before { content: $fa-var-signal; }
.#{$fa-css-prefix}-gear:before,
Each line represents a glyph. Delete lines that you will not use.
- Recompile
./font-awesome.scss
to../css
in minified and or regular format.
Include only part of font-awesome
You can't. A font is a single file, much like an image or a document. It doesn't matter how you include it in your CSS -- users will still download the whole font file. The CSS definitions just make the font available on your web site.
There are some things that you could do as an alternative. There are some companies that will allow you to generate partial font sets using custom applications (like https://icomoon.io/, for example). That might suit your needs. But, once you create a custom version of their fonts it's still a file that you can't break up. Still, a custom version of icomoon can be very small and streamlined and would likely fit the scenario you describe.
Another alternative would be to not host the font yourself but use cloud-based fonts that are more likely to be cached by your users. It's not a solution per se but would increase the chances somewhat that your users wouldn't have to download the fonts specifically for your site.
font-awesome icon with specific value(s)
I guess you want to reduce the font-size
and also lift it up a little bit.
h4 {
position: relative;
}
h4 .fa {
font-size: 12px;
position: absolute;
right: -20px;
top: -3px;
}
For lifting the icon up you can use position absolute like I have done here or you can keep your display inline block
and use margin-top: -5px
or something to lift it up.
Related Topics
How to Get Linear Gradient Effect on Mozilla Firefox
CSS or HTML5 for First and Last Elements
What Are Common Classes, Helper Classes, and Utility Classes in CSS
Image and Color Overlay on Hover
Website Will Not Scroll on Mobile Devices
CSS: Which Is Faster for The Browser? Color:#Fff; or Color:#Ffffff;
Exclude Menu Item from Collapsing Bootsrap
Scrolling Effect: Slow at First Than It Goes Fast
Hide Parts of Site on Mobile Devces
How to Make The Elements Cover 100% of The Space Available in a Container Using Flexbox
How to Fix Hamburger Menu Animation
PHPstorm Less Watcher Configuration
Extend Only First Level on Sass
CSS Not Loading in Firefox, Opera and Ie - Chrome and Safari Works Just Fine