Skip to main content
Cornell University

Cornell Design System Documentation

Custom Development Team

  • Home
  • Template Structure
    • Template Structure Overview
    • Band (Layer 1)
    • Region (Layer 2)
    • Container (Layer 3)
    • Layout (Layer 4)
    • Section (Layer 5)
    • Block and Content (Layer 6)
  • Landmarks
    • Landmarks Overview
    • Footer
    • Header
    • Main content
    • Navigation
  • Components
    • Components Overview
    • Blockquote
    • Button
    • Checkboxes
    • Fieldset
    • Form inputs (other)
    • Form inputs (text)
    • Horizontal rule
    • List
    • Panel
    • Table
  • Patterns
    • Patterns Overivew
    • Accordion
    • Card
    • Tablist
  • Typography
    • Fonts
    • Headings
    • Icons
    • Images
    • Text and color
  • Development
    • Development Overview
    • Filters

On this page

  1. Code
    • FontAwesome HTML
    • FontAwesome CSS
    • SVG
  2. Classes
    • {fa-icon}
    • {fa-icon-character}

Icons

Icons are available via FontAwesome Free v.4.7 and some custom SVG icons available in the images/cornell and images/ui directories. FontAwesome icons can be used with the .fa classes or using the content: declaration in CSS.

Code

FontAwesome HTML

<span class=”fa {fa-icon}”></span>

FontAwesome CSS

content: ‘{fa-icon-character}’;

SVG

Wordpress

<img src=”<?php get_stylesheet_directory(); ?>/images/ui/{svg}” />

Drupal

<img src=”{{ base_path }}/[path/to/theme]/images/ui/{svg}” />

Classes

{fa-icon}

Add the relevant class found on fontawesome.com. Be sure the icon is both "Free" and included in FontAwesome version 4.

{fa-icon-character}

Add the Unicode with a backslash (\) in front of it. Be sure the icon is both "Free" and included in FontAwesome version 4.

Footer Content

This documentation for CDS was built using MkDocs.