Scribd Logo
Upload

Welcome to Scribd!

  • How To Use - Font Awesome

    Uploaded by

    alex
    29 views13 pages
    fontawesome

    Original Title

    How to Use _ Font Awesome

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    fontawesome

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    29 views13 pages

    How To Use - Font Awesome

    Uploaded by

    alex
    fontawesome

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    of 13
    2018/2018 How to Use | Font Awesome Web Fonts with Css v 3) slack xe ees ‘ads via Carbon ait; httpulicarbonads.net/? utm_source-fontawesomegutm_medium=ad_via_link&utmcampaign=in_unit&utm_term=carboné Web Fonts with CSS The tried-and-true technology that Font Awesome was founded upon from the very beginning. Web Fonts are well-supported in almost every possible browser and are especially gentle to integrate with existing tools. Q Get Started First! Ifyou didn't set up Font Awesome in your project yet, you'll want to do that first. Mmmkay? We have lots of options and you'll need to think about which one is best for you: + On websites using the new SVG with JS Basic Use ‘You can place Font Awesome icons just about anywhere using a CSS style prefix and the icon’s name. Font Awesome is designed to be used with inline elements (we like the tag for brevity, but using a is more semantically correct) hps:lfontawesome.comhow-lo-selweb fonts-itr-ess wa 2018/2018 How to Use | Font Awesome | ¢/i> a Font Awesome icons automatically inherit CSS size and color. This means they blend in with text inline wherever you put them.
    a jem; color: Tomatc Need to find an icon to use? Check out all 277 here. Styles & Prefixes Font Awesome S icons can be any of 4 different styles, each with its own prefix. Style Style Prefix @fontface weight Code Result Solid fas 900 a Regular far OD 400 far Fa-canera-reteo"> a Light =m 300 th classetfal fa-conera-retro"> a Brands sao 400 < classe"fab fa-font-auesone"> o Q The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands. hps:lfontawesome.comhow-lo-selweb fonts-itr-ess ana 2018/2018 How to Use | Font Awesome Additional Styling Icon Sizes Class Size faxs 75em fa-sm 875em fale 1.33em, also applies vertical-align: -25% fa-2 through f2-10% 2em through 10em Fixed Width Icons Use ‘a-fw to set icons to the same fixed width. Great to use when varying icon widths would throw off vertical alignment. Especially useful in things like nav lists & list groups. For clarity in the example, we've added a backaround color on the icon so you can see the fixed width: htps:fontawesome.com/how-lo-selweb-fonts-nit-ess ana 2018/2018 How to Use | Font Awesome @ Home Info G library @ Applications ® Settings Hone
     Info
    Library
    Applicatic Settings
    a ee » List Icons Use fa-ul and 2-11 to replace default bullets in unordered lists. List icons can be used to replace bullets C inlists
      List icons canc,
    • be used to
      • <1idespan class="fas fa-spinner fa-pulse">
    ee >a Bordered & Pulled Icons Use fa-border and f-puli-right of f2-pull-teft for easy pull quotes or atticle icons. 66 Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter — tomorrow we will run faster, ctratch aur arme further And ane fine marina — Sa we heat an haate anainet hps:lfontawesome.comhow-lo-selweb-fonts-itr-ess ana 2018/2018 How to Use | Font Awesome Wye re ete ry eee aay Gatsby believed in the green light, the orgastic future that year by year recedes be It eluded us then, but that’s no matter — tomorrow we will run faster, stre re ‘And one fine morning — So we beat on, boats against the current, borne back ceaseles ‘ >a Animated Icons Use the ¢-spin class to get any icon to rotate, and use “2-pulse to have it rotate with 8 steps. Works especially well with f2-spioner & everything in the spinner icons category. in" > fa-spin"> Ln"> " > Icon animation wobble foibles We've worked hard to keep icons perfectly centered when they are spinning or pulsing. However, we've seen issues with several browsers and the web fonts version of Font Awesome. Through a lot of investigation this appears to be an issue with web fonts in general and not something we can directly fix. We do have a couple of ways you might be able to werk around this, 4. Switch to the SVG with JavaScript version, it's working a lot better for this 2, Use dispiay: block: where you can, This seems to help a lot with this issue. hps:lfontawesome.comhow-lo-selweb fonts-itr-ess 53 2018/2018 How to Use | Font Awesome Rotated & Flipped Icons To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes. "> " "> > Stacked Icons 1@ fe-stack class on the parent, the ‘a-stack-1x for the regularly sized icon, and To stack multiple icons, use # fa-stack-2x for the larger icon. fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing. 008 <¢/i> a-stack-2x" styl Less & Sass Using Less or Sass manually in your project? No problema. Here's how to get going, Lin the wedfonts-with-css directory, copy the scss or less directory into your project. Z.Inthe webfonts-with-css directory, copy the uebfonts directory into your project where your static files get served 3. Open your project's 1ess/variables.less Of scss/_variables.scss and edit the @fa-font-path oF $f2-font-path variable to point to your font directory. 4, Import Font Awesome @inport "less/fontawesone.less" OF @inport “scss/fontawesome. sess" 5, Import one or more styles @inport "less/fa-solid.less" OF @inport “scss/fa-solid.scss” 6. Compile your code and go! B variables sess $fa-font-path: "../webfonts"; Q You probably already know this but we seem to always forget it. The font path is relative from your compiled CSS directory. Ensure that you place your webfonts directory in a place relative to where your final CSS will be located. Mixins for Sass + You can use @include f2-icon; to get things setup as an icon. + Use goxtend .fas; to create anicon in the Solid style. import other styles to use other prefixes. + Use ¢-cor about this. int and variable names to make including context values a little easier. Sass can be grumpy hps:lfontawesome.comhow-lo-selweb fonts-itr-ess ma 2018/2018 How to Use | Font Awesome B opp sess @import "./fontawesome/scss/fontawesome.scss" ; @import "./fontawesome/scss/fa-solid.scss” - /fontawesome/scss/fa-brands.scs: import \de fa-icons &:before { content: fa-content($fa-var-user); + 3 .twitter { @include fa-icon; @extend . fab; &:before { content: fa-content($fa-var-twitter) 5 Mixins for Less + You can use .*2-icon; to get things setup as an icon. + Use 2s; to cteate an icon in the Solid style. Import other styles to use other prefixes. ‘+ Use variables to make including content values a little easier. B appiess Ginport "./fontawesome/less/fontawesome" ; Ginport "./fontawesome/less/fa-solid” ; mport "./fontawesome/less/Fa-brands" ; cuser { -fa-icons -fass &:before { hps:lfontawesome.comhow-lo-selweb fonts-witr-ess ana 2018/2018 How to Use | Font Awesome content: stwitter { -fa-icons fab; &:before { content: Accessibility Now that you've got a handle on all the awesome ways you can use FAS, make sure to read our guide on icon accessibility! CSS Pseudo-elements We've seen a lot of examples where adding markup like allows you to easily add icons to any site, But what if changing the markup or HTML is not possible? US/docs/Web/CSS/Pseudo-elements> . Font Awesome has leveraged the ::before pseudo-element to add icons to @ page since the very beginning, A Oh oh oh oh...nice shootin’, Tex Now, before you go laying into these pseudo-elements with an unlicensed nuclear accelerator consider that these are more complicated and prone to errors than your average 1 tag. So take @ pause and consider if this is really the best choice. How do they work with Web Fonts hpsiffontawesome.comhow-lo-seiweb fonts-nitv-ess ana 2018/2018 How to Use | Font Awesome ‘We've already learnes that Font Awesome uses classes Ike fa and fs-user to Show Icons in your site. Let's ‘duplicate the functionality of these classes and write our own. Login TPS Reports cnav> hps:lfontawesome.comhow-lo-selweb fonts-itr-ess son3 2018/2018 How to Use | Font Awesome