Text Classes

Click on the classes below for examples.

Colors

Color classes can be used for both text and icons.

• text-red

  Shenandoah University

• text-blue

  Shenandoah University

• text-black

  Shenandoah University

• text-white

  Shenandoah University

Font Sizes

Override font sizing classes by adding inline styles to elements.*

• text-sm (Default 16px)

  Shenandoah University

• text-md

  Shenandoah University

• text-lg

  Shenandoah University

• text-xlg

  Shenandoah University

*Please convert pixel units to rems when adding overrides to be proportionate to root (default) font size of 16px.
To convert: desired ÷ root (e.g. 18px÷16px = 1.125rem)

Weights & Styles

Recommended character count for line-h-dotted and line-h-solid: 8-10 characters.

• text-light

  Shenandoah University

• text-bold

  Shenandoah University

• text-italic

  Shenandoah University

• text-uppercase

  Shenandoah University

• text-center (outline set as example)

  Shenandoah University

• margin-0 (removes default margins on all sides on all sides of the element)

  Shenandoah University

• line-h-dotted

  Shenandoah University

• line-h-solid

  Shenandoah University

• line-'color' (red,blue,black,white)

  specify line colors - if not specified, lines will default to inherited text color.

  Shenandoah University

• text-inline (has to applied to all inline items)

  Shenandoah University

  Shenandoah University

• text-inline-middle: center aligns inline content

  Shenandoah University

  Shenandoah University

• text-inline-top: top aligns the smallest inline content

  Shenandoah University

  Shenandoah University

---

Icons

Click on the following examples for a preview and icon code snippet.

Custom SU Icons

• SU Stars  <i class="icon-su-stars"></i>   
• SU AEC  <i class="icon-su-aec"></i>   
• SU BSC  <i class="icon-su-bsc"></i>  
• SU SG  <i class="icon-su-sg"></i>   
• SU bridge  <i class="icon-su-bridge"></i> 
• SU GS <i class="icon-su-gs"></i>   
• SU HHH  <i class="icon-su-hhh"></i>   
• SU HLSB  <i class="icon-su-hlsb"></i>   
• SU OBT  <i class="icon-su-obt"></i>   
• SU SU <i class="icon-su-su"></i>   

Font Awesome Icon Library Examples

All font awesome icon classes are prefixed with "fas.." or "fab..". Please refer to their documentation for more information.

• Address Card <i class="fas fa-address-card text-red"></i> 
• Binoculars <i class="fas fa-binoculars text-red"></i> 
• Android <i class="fab fa-android text-red"></i> 
• Anchor <i class="fas fa-anchor text-red"></i> 

Icon Size Classes

Available for custom and font awesome. Max size class is fa-10x.

• fa-1x (Default)
   <i class="icon-su-su fa-1x text-blue"></i>
• fa-2x
   <i class="icon-su-su fa-1x text-blue"></i>
• fa-3x
   <i class="icon-su-su fa-1x text-blue"></i>
• fa-4x
   <i class="icon-su-su fa-1x text-blue"></i>
• fa-5x
   <i class="icon-su-su fa-1x text-blue"></i>