College of Business Style Guide

Font Awesome 

<div class="icon-list">
    <div class="icons">
        <i aria-hidden="true" class="fas fa-bars" aria-label="hamburger icon for menu"></i>
        <p>Bars</p>
    </div>
    <div class="icons">
        <a href="https://www.instagram.com/lehighu/" aria-label="Like us on Instagram">
            <i aria-hidden="true" class="fab fa-instagram"></i>
        </a>
        <p>Instagram</p>
    </div>
    <div class="icons">
        <a href="https://www.facebook.com/lehighu" aria-label="Like us on Facebook">
            <i aria-hidden="true" class="fab fa-facebook-f"></i>
        </a>
        <p>Facebook</p>
    </div>
    <div class="icons">
        <a href="https://twitter.com/lehighu" aria-label="Follow us on Twitter">
            <i aria-hidden="true" class="fab fa-twitter"></i>
        </a>
        <p>Twitter</p>
    </div>
    <div class="icons">
        <a href="https://www.youtube.com/user/lehighuofficial" aria-label="Watch us on YouTube">
            <i aria-hidden="true" class="fab fa-youtube"></i>
        </a>
        <p>YouTube</p>
    </div>
    <div class="icons">
        <a href="https://www1.lehigh.edu/communications/resources/socialmediadirectory#snapchat" aria-label="Snap with us on Snapchat">
            <i aria-hidden="true" class="fab fa-snapchat-ghost"></i>
        </a>
        <p>Snapchat</p>
    </div>
    <div class="icons">
        <a href="http://lehighu.tumblr.com/" aria-label="Follow us on Tumblr">
            <i aria-hidden="true" class="fab fa-tumblr"></i>
        </a>
        <p>Tumblr</p>
    </div>
    <div class="icons">
        <i aria-hidden="true" class="fab fa-linkedin" aria-label="Follow us on LinkedIn"></i>
        <p>LinkedIn</p>
    </div>
    <div class="icons">
        <i aria-hidden="true" class="fab fa-flickr" aria-label="Follow us on Flickr"></i>
        <p>Flickr</p>
    </div>
    <div class="icons">
        <i aria-hidden="true" class="fas fa-rss" aria-label="RSS feed"></i>
        <p>RSS</p>
    </div>
    <div class="icons">
        <i aria-hidden="true" class="fas fa-phone" aria-label="Phone number"></i>
        <p>Phone</p>
    </div>
    <div class="icons">
        <i aria-hidden="true" class="fas fa-envelope" aria-label="Email"></i>
        <p>Envelope</p>
    </div>
    <div class="icons">
        <i aria-hidden="true" class="fas fa-address-card" aria-label="profile"></i>
        <p>Address Card</p>
    </div>
    <div class="icons">
        <i aria-hidden="true" class="fas fa-search" aria-label="search icon"></i>
        <p>Search</p>
    </div>
</div>
 
<div class="icon-list">
    {% for fa_icon in fa_icons %}
        <div class="icons">
            {% if fa_icon.link %}
                <a href="{{ fa_icon.link }}" aria-label="{{ fa_icon.description }}">
                    <i aria-hidden="true" class="{{ fa_icon.class }}"></i>
                </a>
            {% else %}
                <i aria-hidden="true" class="{{ fa_icon.class }}" aria-label="{{ fa_icon.description }}"></i>
            {% endif %}
            <p>{{ fa_icon.name }}</p>
        </div>
    {% endfor %}
</div>
 
{
  "fa_icons": {
    "1": {
      "name": "Bars",
      "class": "fas fa-bars",
      "description": "hamburger icon for menu"
    },
    "2": {
      "name": "Instagram",
      "class": "fab fa-instagram",
      "link": "https://www.instagram.com/lehighu/",
      "description": "Like us on Instagram"
    },
    "3": {
      "name": "Facebook",
      "class": "fab fa-facebook-f",
      "link": "https://www.facebook.com/lehighu",
      "description": "Like us on Facebook"
    },
    "4": {
      "name": "Twitter",
      "class": "fab fa-twitter",
      "link": "https://twitter.com/lehighu",
      "description": "Follow us on Twitter"
    },
    "5": {
      "name": "YouTube",
      "class": "fab fa-youtube",
      "link": "https://www.youtube.com/user/lehighuofficial",
      "description": "Watch us on YouTube"
    },
    "6": {
      "name": "Snapchat",
      "class": "fab fa-snapchat-ghost",
      "link": "https://www1.lehigh.edu/communications/resources/socialmediadirectory#snapchat",
      "description": "Snap with us on Snapchat"
    },
    "7": {
      "name": "Tumblr",
      "class": "fab fa-tumblr",
      "link": "http://lehighu.tumblr.com/",
      "description": "Follow us on Tumblr"
    },
    "8": {
      "name": "LinkedIn",
      "class": "fab fa-linkedin",
      "description": "Follow us on LinkedIn"
    },
    "9": {
      "name": "Flickr",
      "class": "fab fa-flickr",
      "description": "Follow us on Flickr"
    },
    "10": {
      "name": "RSS",
      "class": "fas fa-rss",
      "description": "RSS feed"
    },
    "11": {
      "name": "Phone",
      "class": "fas fa-phone",
      "description": "Phone number"
    },
    "13": {
      "name": "Envelope",
      "class": "fas fa-envelope",
      "description": "Email"
    },
    "14": {
      "name": "Address Card",
      "class": "fas fa-address-card",
      "description": "profile"
    },
    "15": {
      "name": "Search",
      "class": "fas fa-search",
      "description": "search icon"
    }
  }
}
  • Content: 
    .fab {
    font-family: "Font Awesome 5 Brands";
}

.fa, .fab, .fal, .far, .fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.icon-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.icons {
    color: $white;
    background-color: $grey-darkest;
    margin: 0 $space $space $space;
    padding: $space;
    max-width: 100px;
    min-width: 100px;
    text-align: center;

    i {
        font-size: 4rem;
        color: $white;

        &:hover {
            color: $gold;
        }
    }

    p {
        &:blank {
            display: none;
        }
    }
}
  • URL: /components/raw/icons/icons.scss
  • Filesystem Path: components/01-elements/04-icons/icons.scss
  • Size: 750 Bytes

No notes defined.