<div class="icon-list">
<div class="icons">
<i aria-hidden="true" class="fas fa-bars"></i>
<span class="sr-only">open the menu</span>
<p>Bars<br />
<code>\f0c9</code><br />
<code>fas fa-bars</code>
</p>
</div>
<div class="icons">
<a href="https://www.instagram.com/lehighu/">
<i aria-hidden="true" class="fab fa-instagram"></i>
<span class="sr-only">Like us on Instagram</span>
</a>
<p>Instagram<br />
<code>\f16d</code><br />
<code>fab fa-instagram</code>
</p>
</div>
<div class="icons">
<a href="https://www.facebook.com/lehighu">
<i aria-hidden="true" class="fab fa-facebook-f"></i>
<span class="sr-only">Like us on Facebook</span>
</a>
<p>Facebook<br />
<code>\f39e</code><br />
<code>fab fa-facebook-f</code>
</p>
</div>
<div class="icons">
<a href="https://twitter.com/lehighu">
<i aria-hidden="true" class="fab fa-twitter"></i>
<span class="sr-only">Follow us on Twitter</span>
</a>
<p>Twitter<br />
<code>\f099</code><br />
<code>fab fa-twitter</code>
</p>
</div>
<div class="icons">
<a href="https://www.youtube.com/user/lehighuofficial">
<i aria-hidden="true" class="fab fa-youtube"></i>
<span class="sr-only">Watch us on YouTube</span>
</a>
<p>YouTube<br />
<code>\f167</code><br />
<code>fab fa-youtube</code>
</p>
</div>
<div class="icons">
<a href="https://www1.lehigh.edu/communications/resources/socialmediadirectory#snapchat">
<i aria-hidden="true" class="fab fa-snapchat-ghost"></i>
<span class="sr-only">Snap with us on Snapchat</span>
</a>
<p>Snapchat<br />
<code>\f2ac</code><br />
<code>fab fa-snapchat-ghost</code>
</p>
</div>
<div class="icons">
<a href="http://lehighu.tumblr.com/">
<i aria-hidden="true" class="fab fa-tumblr"></i>
<span class="sr-only">Follow us on Tumblr</span>
</a>
<p>Tumblr<br />
<code>\f173</code><br />
<code>fab fa-tumblr</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fab fa-linkedin"></i>
<span class="sr-only">Follow us on LinkedIn</span>
<p>LinkedIn<br />
<code>\f08c</code><br />
<code>fab fa-linkedin</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fab fa-flickr"></i>
<span class="sr-only">Follow us on Flickr</span>
<p>Flickr<br />
<code>\f16e</code><br />
<code>fab fa-flickr</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fab fa-tiktok"></i>
<span class="sr-only">Follow us on TikTok</span>
<p>TikTok<br />
<code>\e07b</code><br />
<code>fab fa-tiktok</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-rss"></i>
<span class="sr-only">RSS feed</span>
<p>RSS<br />
<code>\f09e</code><br />
<code>fas fa-rss</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-phone"></i>
<span class="sr-only">Phone number</span>
<p>Phone<br />
<code>\f095</code><br />
<code>fas fa-phone</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-fax"></i>
<span class="sr-only">Fax</span>
<p>Fax<br />
<code>\f1ac</code><br />
<code>fas fa-fax</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-envelope"></i>
<span class="sr-only">Email</span>
<p>Envelope<br />
<code>\f0e0</code><br />
<code>fas fa-envelope</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-address-card"></i>
<span class="sr-only">profile</span>
<p>Address Card<br />
<code>\f2bb</code><br />
<code>fas fa-address-card</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-search"></i>
<span class="sr-only">search icon</span>
<p>Search<br />
<code>\f002</code><br />
<code>fas fa-search</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-map-pin"></i>
<span class="sr-only">map pin</span>
<p>Map Pin<br />
<code>\f276</code><br />
<code>fas fa-map-pin</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-map-marker-alt"></i>
<span class="sr-only">map marker</span>
<p>Map Marker<br />
<code>\f3c5</code><br />
<code>fas fa-map-marker-alt</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-chevron-right"></i>
<span class="sr-only">chevron right</span>
<p>Chevron-right: bold<br />
<code>\f054</code><br />
<code>fas fa-chevron-right</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fal fa-chevron-right"></i>
<span class="sr-only">chevron right</span>
<p>Chevron-right<br />
<code>\f054</code><br />
<code>fal fa-chevron-right</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-chevron-down"></i>
<span class="sr-only">chevron down</span>
<p>Chevron-down:bold<br />
<code>\f078</code><br />
<code>fas fa-chevron-down</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-chevron-left"></i>
<span class="sr-only">chevron left</span>
<p>Chevron-left:bold<br />
<code>\f053</code><br />
<code>fas fa-chevron-left</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-play"></i>
<span class="sr-only">play</span>
<p>play<br />
<code>\f04b</code><br />
<code>fas fa-play</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-pause"></i>
<span class="sr-only">pause</span>
<p>pause<br />
<code>\f04c</code><br />
<code>fas fa-pause</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="far fa-circle"></i>
<span class="sr-only">circle</span>
<p>circle<br />
<code>\f111</code><br />
<code>far fa-circle</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-plus"></i>
<span class="sr-only">plus</span>
<p>plus<br />
<code>\f067</code><br />
<code>fas fa-plus</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fa fa-times"></i>
<span class="sr-only">times or close x</span>
<p>times<br />
<code>\f00d</code><br />
<code>fa fa-times</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-exclamation-triangle"></i>
<span class="sr-only">exclamation for alert</span>
<p>exclamation triangle<br />
<code>\f071</code><br />
<code>fas fa-exclamation-triangle</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-question"></i>
<span class="sr-only">question mark</span>
<p>question<br />
<code>\f128</code><br />
<code>fas fa-question</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="far fa-file-alt"></i>
<span class="sr-only">document icon</span>
<p>file-alt<br />
<code>\f128</code><br />
<code>far fa-file-alt</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="far fa-clock"></i>
<span class="sr-only">clock icon</span>
<p>clock<br />
<code>\f017</code><br />
<code>far fa-clock</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="far fa-calendar-alt"></i>
<span class="sr-only">calendar icon</span>
<p>calendar<br />
<code>\f073</code><br />
<code>far fa-calendar-alt</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-tag"></i>
<span class="sr-only">tag icon</span>
<p>tag<br />
<code>\f02b</code><br />
<code>fas fa-tag</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="far fa-sitemap"></i>
<span class="sr-only">sitemap icon</span>
<p>sitemap<br />
<code>\f0e8</code><br />
<code>far fa-sitemap</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-lock-alt"></i>
<span class="sr-only">lock icon</span>
<p>lock<br />
<code>\f30d</code><br />
<code>fas fa-lock-alt</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-graduation-cap"></i>
<span class="sr-only">graduation cap icon</span>
<p>graduation cap<br />
<code>\f19d</code><br />
<code>fas fa-graduation-cap</code>
</p>
</div>
<div class="icons">
<i aria-hidden="true" class="fas fa-user"></i>
<span class="sr-only">silhouette icon</span>
<p>head silhouette<br />
<code>\f007</code><br />
<code>fas fa-user</code>
</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 }}">
<i aria-hidden="true" class="{{ fa_icon.class }}"></i>
<span class="sr-only">{{ fa_icon.description }}</span>
</a>
{% else %}
<i aria-hidden="true" class="{{ fa_icon.class }}"></i>
<span class="sr-only">{{ fa_icon.description }}</span>
{% endif %}
<p>{{ fa_icon.name }}<br />
<code>{{ fa_icon.css_content }}</code><br />
<code>{{ fa_icon.class }}</code></p>
</div>
{% endfor %}
</div>
{
"fa_icons": {
"1": {
"name": "Bars",
"class": "fas fa-bars",
"css_content": "\\f0c9",
"description": "open the menu"
},
"2": {
"name": "Instagram",
"class": "fab fa-instagram",
"css_content": "\\f16d",
"link": "https://www.instagram.com/lehighu/",
"description": "Like us on Instagram"
},
"3": {
"name": "Facebook",
"class": "fab fa-facebook-f",
"css_content": "\\f39e",
"link": "https://www.facebook.com/lehighu",
"description": "Like us on Facebook"
},
"4": {
"name": "Twitter",
"class": "fab fa-twitter",
"css_content": "\\f099",
"link": "https://twitter.com/lehighu",
"description": "Follow us on Twitter"
},
"5": {
"name": "YouTube",
"class": "fab fa-youtube",
"css_content": "\\f167",
"link": "https://www.youtube.com/user/lehighuofficial",
"description": "Watch us on YouTube"
},
"6": {
"name": "Snapchat",
"class": "fab fa-snapchat-ghost",
"css_content": "\\f2ac",
"link": "https://www1.lehigh.edu/communications/resources/socialmediadirectory#snapchat",
"description": "Snap with us on Snapchat"
},
"7": {
"name": "Tumblr",
"class": "fab fa-tumblr",
"css_content": "\\f173",
"link": "http://lehighu.tumblr.com/",
"description": "Follow us on Tumblr"
},
"8": {
"name": "LinkedIn",
"class": "fab fa-linkedin",
"css_content": "\\f08c",
"description": "Follow us on LinkedIn"
},
"9": {
"name": "Flickr",
"class": "fab fa-flickr",
"css_content": "\\f16e",
"description": "Follow us on Flickr"
},
"10": {
"name": "TikTok",
"class": "fab fa-tiktok",
"css_content": "\\e07b",
"description": "Follow us on TikTok"
},
"11": {
"name": "RSS",
"class": "fas fa-rss",
"css_content": "\\f09e",
"description": "RSS feed"
},
"12": {
"name": "Phone",
"class": "fas fa-phone",
"css_content": "\\f095",
"description": "Phone number"
},
"13": {
"name": "Fax",
"class": "fas fa-fax",
"css_content": "\\f1ac",
"description": "Fax"
},
"14": {
"name": "Envelope",
"class": "fas fa-envelope",
"css_content": "\\f0e0",
"description": "Email"
},
"15": {
"name": "Address Card",
"class": "fas fa-address-card",
"css_content": "\\f2bb",
"description": "profile"
},
"16": {
"name": "Search",
"class": "fas fa-search",
"css_content": "\\f002",
"description": "search icon"
},
"17": {
"name": "Map Pin",
"class": "fas fa-map-pin",
"css_content": "\\f276",
"description": "map pin"
},
"18": {
"name": "Map Marker",
"class": "fas fa-map-marker-alt",
"css_content": "\\f3c5",
"description": "map marker"
},
"19": {
"name": "Chevron-right: bold",
"class": "fas fa-chevron-right",
"css_content": "\\f054",
"description": "chevron right"
},
"20": {
"name": "Chevron-right",
"class": "fal fa-chevron-right",
"css_content": "\\f054",
"description": "chevron right"
},
"21": {
"name": "Chevron-down:bold",
"class": "fas fa-chevron-down",
"css_content": "\\f078",
"description": "chevron down"
},
"22": {
"name": "Chevron-left:bold",
"class": "fas fa-chevron-left",
"css_content": "\\f053",
"description": "chevron left"
},
"23": {
"name": "play",
"class": "fas fa-play",
"css_content": "\\f04b",
"description": "play"
},
"24": {
"name": "pause",
"class": "fas fa-pause",
"css_content": "\\f04c",
"description": "pause"
},
"25": {
"name": "circle",
"class": "far fa-circle",
"css_content": "\\f111",
"description": "circle"
},
"26": {
"name": "plus",
"class": "fas fa-plus",
"css_content": "\\f067",
"description": "plus"
},
"27": {
"name": "times",
"class": "fa fa-times",
"css_content": "\\f00d",
"description": "times or close x"
},
"28": {
"name": "exclamation triangle",
"class": "fas fa-exclamation-triangle",
"css_content": "\\f071",
"description": "exclamation for alert"
},
"29": {
"name": "question",
"class": "fas fa-question",
"css_content": "\\f128",
"description": "question mark"
},
"30": {
"name": "file-alt",
"class": "far fa-file-alt",
"css_content": "\\f128",
"description": "document icon"
},
"31": {
"name": "clock",
"class": "far fa-clock",
"css_content": "\\f017",
"description": "clock icon"
},
"32": {
"name": "calendar",
"class": "far fa-calendar-alt",
"css_content": "\\f073",
"description": "calendar icon"
},
"33": {
"name": "tag",
"class": "fas fa-tag",
"css_content": "\\f02b",
"description": "tag icon"
},
"34": {
"name": "sitemap",
"class": "far fa-sitemap",
"css_content": "\\f0e8",
"description": "sitemap icon"
},
"35": {
"name": "lock",
"class": "fas fa-lock-alt",
"css_content": "\\f30d",
"description": "lock icon"
},
"36": {
"name": "graduation cap",
"class": "fas fa-graduation-cap",
"css_content": "\\f19d",
"description": "graduation cap icon"
},
"37": {
"name": "head silhouette",
"class": "fas fa-user",
"css_content": "\\f007",
"description": "silhouette icon"
}
}
}
.icon-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.icons {
color: $lehigh_brown;
background-color: $white;
margin: 0 $spacer $spacer $spacer;
padding: $spacer;
max-width: 125px;
min-width: 125px;
text-align: center;
a {
border-bottom: 0;
}
i {
font-size: 4rem;
color: $lehigh_brown;
&:hover {
color: $gold;
}
}
p {
&:blank {
display: none;
}
code {
font-size: .75rem;
}
}
}
Display Font Awesome icons used throughout the website.