Semantic
Library Defaults
Theming Concepts
Semantic uses an inheritance system similar to Sublime Text designed to facilitate an ecosystem of theming.
Theme
Package Defaults
Site
User Overrides
Semantic definitions are compiled with LESS using only simple, well adopted CSS pre-processing features like css variables, color adjustment functions, and unit conversions, but not language-specific features like nested rule declarations, guards, or mix-ins.
Elements of a Theme
Themes are composed of two separate files: a .variable file, which has values that modify variables for a component, and an .overrides file, which includes LESS rules which will be included after the default css of a definition.
Global Inheritance
Each component in Semantic, inherits from site.variables. This file contains many important site-wide defaults like base EM values, brand colors and named colors, sizing defaults, font settings and more. Keeping site wide defaults central allow you to quickly adjust constraints for all components for your site, by adjusting values like global @borderRadius @fontSize or @emSize.
site.variables is a "global definition" file with the same three levels of inheritance as other definitions.
Component Inheritance
Each component in Semantic, begins its inheritance with default values from site.variables, and then defines its own variables as part of a default theme. The default theme then can be modified by a packaged theme, or by a site theme.
For example, ui button loads variables from six separate files in order:
Site variables
Defaults pulled from
src/themes/default/site.variables
Packaged theme overrides pulled for site from
src/themes/{themename}/site.variables
Site overrides pulled from
src/site/site.variables
Button variables
Button default variables from
src/themes/default/elements/button.variables
Button packaged-theme variables from
src/themes/{themename}/elements/button.variables
Button's site theme from
src/site/elements/button.variables
CSS Overrides
If additional CSS, not included in the definition, is necessary for a theme, or to adjust an element for your site, it is recommended to use an .override file.
Overrides are parsed and written after the definition's css and allows developers to include arbitrary css inside the definition. Overrides are parsed as LESS files and all component variables are available inside an override file.
Theme overrides are used to add css rules which are not available in the source definition, but are necessary for the theme to work.
Site theme overrides are home to the arbitrary or temporaneous aspects of an element for integrating it on a site. Hacks, one-time fixes, shortcuts, etc are all sometimes important parts of making a website work, but aren't things we want to re-use from project to project. Using a site override file for an element, allows you to make these concessions without sullying the re-usability of the rest of your code.
CSS Write Order
CSS compiled from
src/definitions/elements/button.less
CSS compiled from
src/themes/{themeName}/elements/button.overrides
CSS compiled from
src/site/elements/button.overrides
Overrides in Practice
Some definitions files may even include override files as part of its default theme. This is to move the arbitrary bits outside of a definition. For example ui icon has the UTF content in its override file, so that themes do not inherit these arbitrary properties.
/*******************************
Icons
*******************************/
/* Web Content */
i.icon.search:before { content: "\f002"; }
i.icon.mail.outline:before { content: "\f003"; }
i.icon.external.link:before { content: "\f08e"; }
i.icon.wifi:before { content: "\f012"; }
i.icon.setting:before { content: "\f013"; }
i.icon.home:before { content: "\f015"; }
i.icon.inbox:before { content: "\f01c"; }
i.icon.browser:before { content: "\f022"; }
i.icon.tag:before { content: "\f02b"; }
i.icon.tags:before { content: "\f02c"; }
i.icon.calendar:before { content: "\f073"; }
i.icon.comment:before { content: "\f075"; }
i.icon.comments:before { content: "\f086"; }
i.icon.shop:before { content: "\f07a"; }
i.icon.privacy:before { content: "\f084"; }
i.icon.settings:before { content: "\f085"; }
i.icon.trophy:before { content: "\f091"; }
i.icon.payment:before { content: "\f09d"; }
i.icon.feed:before { content: "\f09e"; }
i.icon.alarm.outline:before { content: "\f0a2"; }
i.icon.tasks:before { content: "\f0ae"; }
i.icon.cloud:before { content: "\f0c2"; }
i.icon.lab:before { content: "\f0c3"; }
i.icon.mail:before { content: "\f0e0"; }
i.icon.idea:before { content: "\f0eb"; }
i.icon.dashboard:before { content: "\f0e4"; }
i.icon.sitemap:before { content: "\f0e8"; }
i.icon.alarm:before { content: "\f0f3"; }
i.icon.terminal:before { content: "\f120"; }
i.icon.code:before { content: "\f121"; }
i.icon.protect:before { content: "\f132"; }
i.icon.calendar.outline:before { content: "\f133"; }
i.icon.ticket:before { content: "\f145"; }
i.icon.external.link.square:before { content: "\f14c"; }
i.icon.map:before { content: "\f14e"; }
i.icon.bug:before { content: "\f188"; }
i.icon.mail.square:before { content: "\f199"; }
i.icon.history:before { content: "\f1da"; }
i.icon.options:before { content: "\f1de"; }
i.icon.comment.outline:before { content: "\f0e5"; }
i.icon.comments.outline:before { content: "\f0e6"; }
/* User Actions */
i.icon.download:before { content: "\f019"; }
i.icon.repeat:before { content: "\f01e"; }
i.icon.refresh:before { content: "\f021"; }
i.icon.lock:before { content: "\f023"; }
i.icon.bookmark:before { content: "\f02e"; }
i.icon.print:before { content: "\f02f"; }
i.icon.write:before { content: "\f040"; }
i.icon.theme:before { content: "\f043"; }
i.icon.adjust:before { content: "\f042"; }
i.icon.edit:before { content: "\f044"; }
i.icon.external.share:before { content: "\f045"; }
i.icon.ban:before { content: "\f05e"; }
i.icon.mail.forward:before { content: "\f064"; }
i.icon.share:before { content: "\f064"; }
i.icon.expand:before { content: "\f065"; }
i.icon.compress:before { content: "\f066"; }
i.icon.unhide:before { content: "\f06e"; }
i.icon.hide:before { content: "\f070"; }
i.icon.random:before { content: "\f074"; }
i.icon.retweet:before { content: "\f079"; }
i.icon.sign.out:before { content: "\f08b"; }
i.icon.pin:before { content: "\f08d"; }
i.icon.sign.in:before { content: "\f090"; }
i.icon.upload:before { content: "\f093"; }
i.icon.call:before { content: "\f095"; }
i.icon.call.square:before { content: "\f098"; }
i.icon.remove.bookmark:before { content: "\f097"; }
i.icon.unlock:before { content: "\f09c"; }
i.icon.configure:before { content: "\f0ad"; }
i.icon.filter:before { content: "\f0b0"; }
i.icon.wizard:before { content: "\f0d0"; }
i.icon.undo:before { content: "\f0e2"; }
i.icon.exchange:before { content: "\f0ec"; }
i.icon.cloud.download:before { content: "\f0ed"; }
i.icon.cloud.upload:before { content: "\f0ee"; }
i.icon.reply:before { content: "\f112"; }
i.icon.reply.all:before { content: "\f122"; }
i.icon.erase:before { content: "\f12d"; }
i.icon.unlock.alternate:before { content: "\f13e"; }
i.icon.archive:before { content: "\f187"; }
i.icon.translate:before { content: "\f1ab"; }
i.icon.recycle:before { content: "\f1b8"; }
i.icon.send:before { content: "\f1d8"; }
i.icon.send.outline:before { content: "\f1d9"; }
i.icon.share.alternate:before { content: "\f1e0"; }
i.icon.share.alternate.square:before { content: "\f1e1"; }
i.icon.wait:before { content: "\f017"; }
i.icon.write.square:before { content: "\f14b"; }
i.icon.share.square:before { content: "\f14d"; }
/* Messages */
i.icon.help.circle:before { content: "\f059"; }
i.icon.info.circle:before { content: "\f05a"; }
i.icon.warning:before { content: "\f12a"; }
i.icon.warning.circle:before { content: "\f06a"; }
i.icon.warning.sign:before { content: "\f071"; }
i.icon.help:before { content: "\f128"; }
i.icon.info:before { content: "\f129"; }
i.icon.announcement:before { content: "\f0a1"; }
/* Users */
i.icon.users:before { content: "\f0c0"; }
i.icon.doctor:before { content: "\f0f0"; }
i.icon.female:before { content: "\f182"; }
i.icon.male:before { content: "\f183"; }
i.icon.child:before { content: "\f1ae"; }
i.icon.user:before { content: "\f007"; }
i.icon.handicap:before { content: "\f193"; }
i.icon.student:before { content: "\f19d"; }
/* View Adjustment */
i.icon.grid.layout:before { content: "\f00a"; }
i.icon.list.layout:before { content: "\f00b"; }
i.icon.block.layout:before { content: "\f009"; }
i.icon.zoom:before { content: "\f00e"; }
i.icon.zoom.out:before { content: "\f010"; }
i.icon.resize.vertical:before { content: "\f07d"; }
i.icon.resize.horizontal:before { content: "\f07e"; }
i.icon.maximize:before { content: "\f0b2"; }
i.icon.crop:before { content: "\f125"; }
/* Literal Objects */
i.icon.cocktail:before { content: "\f000"; }
i.icon.road:before { content: "\f018"; }
i.icon.flag:before { content: "\f024"; }
i.icon.book:before { content: "\f02d"; }
i.icon.gift:before { content: "\f06b"; }
i.icon.leaf:before { content: "\f06c"; }
i.icon.fire:before { content: "\f06d"; }
i.icon.plane:before { content: "\f072"; }
i.icon.magnet:before { content: "\f076"; }
i.icon.legal:before { content: "\f0e3"; }
i.icon.lemon:before { content: "\f094"; }
i.icon.world:before { content: "\f0ac"; }
i.icon.travel:before { content: "\f0b1"; }
i.icon.shipping:before { content: "\f0d1"; }
i.icon.money:before { content: "\f0d6"; }
i.icon.lightning:before { content: "\f0e7"; }
i.icon.rain:before { content: "\f0e9"; }
i.icon.treatment:before { content: "\f0f1"; }
i.icon.suitcase:before { content: "\f0f2"; }
i.icon.bar:before { content: "\f0fc"; }
i.icon.flag.outline:before { content: "\f11d"; }
i.icon.flag.checkered:before { content: "\f11e"; }
i.icon.puzzle:before { content: "\f12e"; }
i.icon.fire.extinguisher:before { content: "\f134"; }
i.icon.rocket:before { content: "\f135"; }
i.icon.anchor:before { content: "\f13d"; }
i.icon.bullseye:before { content: "\f140"; }
i.icon.sun:before { content: "\f185"; }
i.icon.moon:before { content: "\f186"; }
i.icon.fax:before { content: "\f1ac"; }
i.icon.life.ring:before { content: "\f1cd"; }
i.icon.bomb:before { content: "\f1e2"; }
/* Shapes */
i.icon.crosshairs:before { content: "\f05b"; }
i.icon.asterisk:before { content: "\f069"; }
i.icon.certificate:before { content: "\f0a3"; }
i.icon.circle:before { content: "\f111"; }
i.icon.quote.left:before { content: "\f10d"; }
i.icon.quote.right:before { content: "\f10e"; }
i.icon.ellipsis.horizontal:before { content: "\f141"; }
i.icon.ellipsis.vertical:before { content: "\f142"; }
i.icon.cube:before { content: "\f1b2"; }
i.icon.cubes:before { content: "\f1b3"; }
i.icon.circle.notched:before { content: "\f1ce"; }
i.icon.circle.thin:before { content: "\f1db"; }
/* Item Selection */
i.icon.checkmark:before { content: "\f00c"; }
i.icon.remove:before { content: "\f00d"; }
i.icon.checkmark.box:before { content: "\f046"; }
i.icon.move:before { content: "\f047"; }
i.icon.add.circle:before { content: "\f055"; }
i.icon.minus.circle:before { content: "\f056"; }
i.icon.remove.circle:before { content: "\f057"; }
i.icon.check.circle:before { content: "\f058"; }
i.icon.remove.circle.outline:before { content: "\f05c"; }
i.icon.check.circle.outline:before { content: "\f05d"; }
i.icon.plus:before { content: "\f067"; }
i.icon.minus:before { content: "\f068"; }
i.icon.add.square:before { content: "\f0fe"; }
i.icon.radio:before { content: "\f10c"; }
i.icon.selected.radio:before { content: "\f192"; }
i.icon.minus.square:before { content: "\f146"; }
i.icon.minus.square.outline:before { content: "\f147"; }
i.icon.check.square:before { content: "\f14a"; }
i.icon.plus.square.outline:before { content: "\f196"; }
/* Media */
i.icon.film:before { content: "\f008"; }
i.icon.sound:before { content: "\f025"; }
i.icon.photo:before { content: "\f030"; }
i.icon.bar.chart:before { content: "\f080"; }
i.icon.camera.retro:before { content: "\f083"; }
/* Pointers */
i.icon.arrow.circle.outline.down:before { content: "\f01a"; }
i.icon.arrow.circle.outline.up:before { content: "\f01b"; }
i.icon.chevron.left:before { content: "\f053"; }
i.icon.chevron.right:before { content: "\f054"; }
i.icon.arrow.left:before { content: "\f060"; }
i.icon.arrow.right:before { content: "\f061"; }
i.icon.arrow.up:before { content: "\f062"; }
i.icon.arrow.down:before { content: "\f063"; }
i.icon.chevron.up:before { content: "\f077"; }
i.icon.chevron.down:before { content: "\f078"; }
i.icon.pointing.right:before { content: "\f0a4"; }
i.icon.pointing.left:before { content: "\f0a5"; }
i.icon.pointing.up:before { content: "\f0a6"; }
i.icon.pointing.down:before { content: "\f0a7"; }
i.icon.arrow.circle.left:before { content: "\f0a8"; }
i.icon.arrow.circle.right:before { content: "\f0a9"; }
i.icon.arrow.circle.up:before { content: "\f0aa"; }
i.icon.arrow.circle.down:before { content: "\f0ab"; }
i.icon.caret.down:before { content: "\f0d7"; }
i.icon.caret.up:before { content: "\f0d8"; }
i.icon.caret.left:before { content: "\f0d9"; }
i.icon.caret.right:before { content: "\f0da"; }
i.icon.angle.double.left:before { content: "\f100"; }
i.icon.angle.double.right:before { content: "\f101"; }
i.icon.angle.double.up:before { content: "\f102"; }
i.icon.angle.double.down:before { content: "\f103"; }
i.icon.angle.left:before { content: "\f104"; }
i.icon.angle.right:before { content: "\f105"; }
i.icon.angle.up:before { content: "\f106"; }
i.icon.angle.down:before { content: "\f107"; }
i.icon.chevron.circle.left:before { content: "\f137"; }
i.icon.chevron.circle.right:before { content: "\f138"; }
i.icon.chevron.circle.up:before { content: "\f139"; }
i.icon.chevron.circle.down:before { content: "\f13a"; }
i.icon.toggle.down:before { content: "\f150"; }
i.icon.toggle.up:before { content: "\f151"; }
i.icon.toggle.right:before { content: "\f152"; }
i.icon.long.arrow.down:before { content: "\f175"; }
i.icon.long.arrow.up:before { content: "\f176"; }
i.icon.long.arrow.left:before { content: "\f177"; }
i.icon.long.arrow.right:before { content: "\f178"; }
i.icon.arrow.circle.outline.right:before { content: "\f18e"; }
i.icon.arrow.circle.outline.left:before { content: "\f190"; }
i.icon.toggle.left:before { content: "\f191"; }
/* Computer */
i.icon.power:before { content: "\f011"; }
i.icon.trash:before { content: "\f014"; }
i.icon.disk.outline:before { content: "\f0a0"; }
i.icon.desktop:before { content: "\f108"; }
i.icon.laptop:before { content: "\f109"; }
i.icon.tablet:before { content: "\f10a"; }
i.icon.mobile:before { content: "\f10b"; }
i.icon.game:before { content: "\f11b"; }
i.icon.keyboard:before { content: "\f11c"; }
/* File System */
i.icon.folder:before { content: "\f07b"; }
i.icon.folder.open:before { content: "\f07c"; }
i.icon.level.up:before { content: "\f148"; }
i.icon.level.down:before { content: "\f149"; }
i.icon.file:before { content: "\f15b"; }
i.icon.file.outline:before { content: "\f016"; }
i.icon.file.text:before { content: "\f15c"; }
i.icon.file.text.outline:before { content: "\f0f6"; }
i.icon.folder.outline:before { content: "\f114"; }
i.icon.folder.open.outline:before { content: "\f115"; }
i.icon.file.pdf.outline:before { content: "\f1c1"; }
i.icon.file.word.outline:before { content: "\f1c2"; }
i.icon.file.excel.outline:before { content: "\f1c3"; }
i.icon.file.powerpoint.outline:before { content: "\f1c4"; }
i.icon.file.image.outline:before { content: "\f1c5"; }
i.icon.file.archive.outline:before { content: "\f1c6"; }
i.icon.file.audio.outline:before { content: "\f1c7"; }
i.icon.file.video.outline:before { content: "\f1c8"; }
i.icon.file.code.outline:before { content: "\f1c9"; }
/* Technologies */
i.icon.barcode:before { content: "\f02a"; }
i.icon.qrcode:before { content: "\f029"; }
i.icon.fork:before { content: "\f126"; }
i.icon.html5:before { content: "\f13b"; }
i.icon.css3:before { content: "\f13c"; }
i.icon.rss.square:before { content: "\f143"; }
i.icon.openid:before { content: "\f19b"; }
i.icon.database:before { content: "\f1c0"; }
/* Rating */
i.icon.heart:before { content: "\f004"; }
i.icon.star:before { content: "\f005"; }
i.icon.empty.star:before { content: "\f006"; }
i.icon.thumbs.outline.up:before { content: "\f087"; }
i.icon.thumbs.outline.down:before { content: "\f088"; }
i.icon.star.half:before { content: "\f089"; }
i.icon.empty.heart:before { content: "\f08a"; }
i.icon.smile:before { content: "\f118"; }
i.icon.frown:before { content: "\f119"; }
i.icon.meh:before { content: "\f11a"; }
i.icon.star.half.empty:before { content: "\f123"; }
i.icon.thumbs.up:before { content: "\f164"; }
i.icon.thumbs.down:before { content: "\f165"; }
/* Audio */
i.icon.music:before { content: "\f001"; }
i.icon.video.play.outline:before { content: "\f01d"; }
i.icon.volume.off:before { content: "\f026"; }
i.icon.volume.down:before { content: "\f027"; }
i.icon.volume.up:before { content: "\f028"; }
i.icon.record:before { content: "\f03d"; }
i.icon.step.backward:before { content: "\f048"; }
i.icon.fast.backward:before { content: "\f049"; }
i.icon.backward:before { content: "\f04a"; }
i.icon.play:before { content: "\f04b"; }
i.icon.pause:before { content: "\f04c"; }
i.icon.stop:before { content: "\f04d"; }
i.icon.forward:before { content: "\f04e"; }
i.icon.fast.forward:before { content: "\f050"; }
i.icon.step.forward:before { content: "\f051"; }
i.icon.eject:before { content: "\f052"; }
i.icon.unmute:before { content: "\f130"; }
i.icon.mute:before { content: "\f131"; }
i.icon.video.play:before { content: "\f144"; }
/* Map & Locations */
i.icon.marker:before { content: "\f041"; }
i.icon.coffee:before { content: "\f0f4"; }
i.icon.food:before { content: "\f0f5"; }
i.icon.building.outline:before { content: "\f0f7"; }
i.icon.hospital:before { content: "\f0f8"; }
i.icon.emergency:before { content: "\f0f9"; }
i.icon.first.aid:before { content: "\f0fa"; }
i.icon.military:before { content: "\f0fb"; }
i.icon.h:before { content: "\f0fd"; }
i.icon.location.arrow:before { content: "\f124"; }
i.icon.space.shuttle:before { content: "\f197"; }
i.icon.university:before { content: "\f19c"; }
i.icon.building:before { content: "\f1ad"; }
i.icon.paw:before { content: "\f1b0"; }
i.icon.spoon:before { content: "\f1b1"; }
i.icon.car:before { content: "\f1b9"; }
i.icon.taxi:before { content: "\f1ba"; }
i.icon.tree:before { content: "\f1bb"; }
/* Tables */
i.icon.table:before { content: "\f0ce"; }
i.icon.columns:before { content: "\f0db"; }
i.icon.sort:before { content: "\f0dc"; }
i.icon.sort.ascending:before { content: "\f0dd"; }
i.icon.sort.descending:before { content: "\f0de"; }
i.icon.sort.alphabet.ascending:before { content: "\f15d"; }
i.icon.sort.alphabet.descending:before { content: "\f15e"; }
i.icon.sort.content.ascending:before { content: "\f160"; }
i.icon.sort.content.descending:before { content: "\f161"; }
i.icon.sort.numeric.ascending:before { content: "\f162"; }
i.icon.sort.numeric.descending:before { content: "\f163"; }
/* Text Editor */
i.icon.font:before { content: "\f031"; }
i.icon.bold:before { content: "\f032"; }
i.icon.italic:before { content: "\f033"; }
i.icon.text.height:before { content: "\f034"; }
i.icon.text.width:before { content: "\f035"; }
i.icon.align.left:before { content: "\f036"; }
i.icon.align.center:before { content: "\f037"; }
i.icon.align.right:before { content: "\f038"; }
i.icon.align.justify:before { content: "\f039"; }
i.icon.list:before { content: "\f03a"; }
i.icon.outdent:before { content: "\f03b"; }
i.icon.indent:before { content: "\f03c"; }
i.icon.linkify:before { content: "\f0c1"; }
i.icon.cut:before { content: "\f0c4"; }
i.icon.copy:before { content: "\f0c5"; }
i.icon.attach:before { content: "\f0c6"; }
i.icon.save:before { content: "\f0c7"; }
i.icon.content:before { content: "\f0c9"; }
i.icon.unordered.list:before { content: "\f0ca"; }
i.icon.ordered.list:before { content: "\f0cb"; }
i.icon.strikethrough:before { content: "\f0cc"; }
i.icon.underline:before { content: "\f0cd"; }
i.icon.paste:before { content: "\f0ea"; }
i.icon.unlink:before { content: "\f127"; }
i.icon.superscript:before { content: "\f12b"; }
i.icon.subscript:before { content: "\f12c"; }
i.icon.header:before { content: "\f1dc"; }
i.icon.paragraph:before { content: "\f1dd"; }
/* Currency */
i.icon.euro:before { content: "\f153"; }
i.icon.pound:before { content: "\f154"; }
i.icon.dollar:before { content: "\f155"; }
i.icon.rupee:before { content: "\f156"; }
i.icon.yen:before { content: "\f157"; }
i.icon.ruble:before { content: "\f158"; }
i.icon.won:before { content: "\f159"; }
i.icon.lira:before { content: "\f195"; }
/* Networks and Websites*/
i.icon.twitter.square:before { content: "\f081"; }
i.icon.facebook.square:before { content: "\f082"; }
i.icon.linkedin.square:before { content: "\f08c"; }
i.icon.github.square:before { content: "\f092"; }
i.icon.twitter:before { content: "\f099"; }
i.icon.facebook:before { content: "\f09a"; }
i.icon.github:before { content: "\f09b"; }
i.icon.pinterest:before { content: "\f0d2"; }
i.icon.pinterest.square:before { content: "\f0d3"; }
i.icon.google.plus.square:before { content: "\f0d4"; }
i.icon.google.plus:before { content: "\f0d5"; }
i.icon.linkedin:before { content: "\f0e1"; }
i.icon.github.alternate:before { content: "\f113"; }
i.icon.maxcdn:before { content: "\f136"; }
i.icon.bitcoin:before { content: "\f15a"; }
i.icon.youtube.square:before { content: "\f166"; }
i.icon.youtube:before { content: "\f167"; }
i.icon.xing:before { content: "\f168"; }
i.icon.xing.square:before { content: "\f169"; }
i.icon.youtube.play:before { content: "\f16a"; }
i.icon.dropbox:before { content: "\f16b"; }
i.icon.stack.overflow:before { content: "\f16c"; }
i.icon.instagram:before { content: "\f16d"; }
i.icon.flickr:before { content: "\f16e"; }
i.icon.adn:before { content: "\f170"; }
i.icon.bitbucket:before { content: "\f171"; }
i.icon.bitbucket.square:before { content: "\f172"; }
i.icon.tumblr:before { content: "\f173"; }
i.icon.tumblr.square:before { content: "\f174"; }
i.icon.apple:before { content: "\f179"; }
i.icon.windows:before { content: "\f17a"; }
i.icon.android:before { content: "\f17b"; }
i.icon.linux:before { content: "\f17c"; }
i.icon.dribbble:before { content: "\f17d"; }
i.icon.skype:before { content: "\f17e"; }
i.icon.foursquare:before { content: "\f180"; }
i.icon.trello:before { content: "\f181"; }
i.icon.gittip:before { content: "\f184"; }
i.icon.vk:before { content: "\f189"; }
i.icon.weibo:before { content: "\f18a"; }
i.icon.renren:before { content: "\f18b"; }
i.icon.pagelines:before { content: "\f18c"; }
i.icon.stack.exchange:before { content: "\f18d"; }
i.icon.vimeo:before { content: "\f194"; }
i.icon.slack:before { content: "\f198"; }
i.icon.wordpress:before { content: "\f19a"; }
i.icon.yahoo:before { content: "\f19e"; }
i.icon.google:before { content: "\f1a0"; }
i.icon.reddit:before { content: "\f1a1"; }
i.icon.reddit.square:before { content: "\f1a2"; }
i.icon.stumbleupon.circle:before { content: "\f1a3"; }
i.icon.stumbleupon:before { content: "\f1a4"; }
i.icon.delicious:before { content: "\f1a5"; }
i.icon.digg:before { content: "\f1a6"; }
i.icon.pied.piper:before { content: "\f1a7"; }
i.icon.pied.piper.alternate:before { content: "\f1a8"; }
i.icon.drupal:before { content: "\f1a9"; }
i.icon.joomla:before { content: "\f1aa"; }
i.icon.behance:before { content: "\f1b4"; }
i.icon.behance.square:before { content: "\f1b5"; }
i.icon.steam:before { content: "\f1b6"; }
i.icon.steam.square:before { content: "\f1b7"; }
i.icon.spotify:before { content: "\f1bc"; }
i.icon.deviantart:before { content: "\f1bd"; }
i.icon.soundcloud:before { content: "\f1be"; }
i.icon.vine:before { content: "\f1ca"; }
i.icon.codepen:before { content: "\f1cb"; }
i.icon.jsfiddle:before { content: "\f1cc"; }
i.icon.rebel:before { content: "\f1d0"; }
i.icon.empire:before { content: "\f1d1"; }
i.icon.git.square:before { content: "\f1d2"; }
i.icon.git:before { content: "\f1d3"; }
i.icon.hacker.news:before { content: "\f1d4"; }
i.icon.tencent.weibo:before { content: "\f1d5"; }
i.icon.qq:before { content: "\f1d6"; }
i.icon.wechat:before { content: "\f1d7"; }
/*******************************
Aliases
*******************************/
i.icon.like:before { content: "\f004"; }
i.icon.favorite:before { content: "\f005"; }
i.icon.video:before { content: "\f008"; }
i.icon.check:before { content: "\f00c"; }
i.icon.remove:before { content: "\f00d"; }
i.icon.close:before { content: "\f00d"; }
i.icon.cancel:before { content: "\f00d"; }
i.icon.delete:before { content: "\f00d"; }
i.icon.x:before { content: "\f00d"; }
i.icon.zoom.in:before { content: "\f00e"; }
i.icon.magnify:before { content: "\f00e"; }
i.icon.shutdown:before { content: "\f011"; }
i.icon.signal:before { content: "\f012"; }
i.icon.clock:before { content: "\f017"; }
i.icon.time:before { content: "\f017"; }
i.icon.play.circle.outline:before { content: "\f01d"; }
i.icon.clockwise:before { content: "\f01e"; }
i.icon.headphone:before { content: "\f025"; }
i.icon.volume.off:before { content: "\f026"; }
i.icon.camera:before { content: "\f030"; }
i.icon.video.camera:before { content: "\f03d"; }
i.icon.picture:before { content: "\f03e"; }
i.icon.pencil:before { content: "\f040"; }
i.icon.compose:before { content: "\f040"; }
i.icon.point:before { content: "\f041"; }
i.icon.tint:before { content: "\f043"; }
i.icon.signup:before { content: "\f044"; }
i.icon.plus.circle:before { content: "\f055"; }
i.icon.minus.circle:before { content: "\f056"; }
i.icon.dont:before { content: "\f05e"; }
i.icon.minimize:before { content: "\f066"; }
i.icon.add:before { content: "\f067"; }
i.icon.eye:before { content: "\f06e"; }
i.icon.attention:before { content: "\f06a"; }
i.icon.cart:before { content: "\f07a"; }
i.icon.plane:before { content: "\f072"; }
i.icon.shuffle:before { content: "\f074"; }
i.icon.talk:before { content: "\f075"; }
i.icon.chat:before { content: "\f075"; }
i.icon.shopping.cart:before { content: "\f07a"; }
i.icon.bar.graph:before { content: "\f080"; }
i.icon.key:before { content: "\f084"; }
i.icon.privacy:before { content: "\f084"; }
i.icon.cogs:before { content: "\f085"; }
i.icon.discussions:before { content: "\f086"; }
i.icon.like.outline:before { content: "\f087"; }
i.icon.dislike.outline:before { content: "\f088"; }
i.icon.heart.outline:before { content: "\f08a"; }
i.icon.log.out:before { content: "\f08b"; }
i.icon.thumb.tack:before { content: "\f08d"; }
i.icon.winner:before { content: "\f091"; }
i.icon.bookmark.outline:before { content: "\f097"; }
i.icon.phone.square:before { content: "\f098"; }
i.icon.phone.square:before { content: "\f098"; }
i.icon.credit.card:before { content: "\f09d"; }
i.icon.rss:before { content: "\f09e"; }
i.icon.hdd.outline:before { content: "\f0a0"; }
i.icon.bullhorn:before { content: "\f0a1"; }
i.icon.bell:before { content: "\f0f3"; }
i.icon.hand.outline.right:before { content: "\f0a4"; }
i.icon.hand.outline.left:before { content: "\f0a5"; }
i.icon.hand.outline.up:before { content: "\f0a6"; }
i.icon.hand.outline.down:before { content: "\f0a7"; }
i.icon.globe:before { content: "\f0ac"; }
i.icon.wrench:before { content: "\f0ad"; }
i.icon.briefcase:before { content: "\f0b1"; }
i.icon.group:before { content: "\f0c0"; }
i.icon.flask:before { content: "\f0c3"; }
i.icon.sidebar:before { content: "\f0c9"; }
i.icon.bars:before { content: "\f0c9"; }
i.icon.list.ul:before { content: "\f0ca"; }
i.icon.list.ol:before { content: "\f0cb"; }
i.icon.numbered.list:before { content: "\f0cb"; }
i.icon.magic:before { content: "\f0d0"; }
i.icon.truck:before { content: "\f0d1"; }
i.icon.currency:before { content: "\f0d6"; }
i.icon.triangle.down:before { content: "\f0d7"; }
i.icon.dropdown:before { content: "\f0d7"; }
i.icon.triangle.up:before { content: "\f0d8"; }
i.icon.triangle.left:before { content: "\f0d9"; }
i.icon.triangle.right:before { content: "\f0da"; }
i.icon.envelope:before { content: "\f0e0"; }
i.icon.conversation:before { content: "\f0e6"; }
i.icon.lightning:before { content: "\f0e7"; }
i.icon.umbrella:before { content: "\f0e9"; }
i.icon.lightbulb:before { content: "\f0eb"; }
i.icon.suitcase:before { content: "\f0f2"; }
i.icon.bell.outline:before { content: "\f0a2"; }
i.icon.ambulance:before { content: "\f0f9"; }
i.icon.medkit:before { content: "\f0fa"; }
i.icon.fighter.jet:before { content: "\f0fb"; }
i.icon.beer:before { content: "\f0fc"; }
i.icon.plus.square:before { content: "\f0fe"; }
i.icon.computer:before { content: "\f108"; }
i.icon.circle.outline:before { content: "\f10c"; }
i.icon.spinner:before { content: "\f110"; }
i.icon.gamepad:before { content: "\f11b"; }
i.icon.star.half.full:before { content: "\f123"; }
i.icon.remove.link:before { content: "\f127"; }
i.icon.question:before { content: "\f128"; }
i.icon.attention:before { content: "\f12a"; }
i.icon.eraser:before { content: "\f12d"; }
i.icon.microphone:before { content: "\f130"; }
i.icon.microphone.slash:before { content: "\f131"; }
i.icon.shield:before { content: "\f132"; }
i.icon.target:before { content: "\f140"; }
i.icon.play.circle:before { content: "\f144"; }
i.icon.pencil.square:before { content: "\f14b"; }
i.icon.compass:before { content: "\f14e"; }
i.icon.eur:before { content: "\f153"; }
i.icon.gbp:before { content: "\f154"; }
i.icon.usd:before { content: "\f155"; }
i.icon.inr:before { content: "\f156"; }
i.icon.cny:before,
i.icon.rmb:before,
i.icon.jpy:before { content: "\f157"; }
i.icon.rouble:before,
i.icon.rub:before { content: "\f158"; }
i.icon.won:before,
i.icon.krw:before { content: "\f159"; }
i.icon.btc:before { content: "\f15a"; }
i.icon.try:before { content: "\f195"; }
i.icon.zip:before { content: "\f187"; }
i.icon.dot.circle.outline:before { content: "\f192"; }
i.icon.sliders:before { content: "\f1de"; }
i.icon.graduation:before { content: "\f19d"; }
i.icon.\33d:before { content: "\f1b2"; }
i.icon.weixin:before { content: "\f1d7"; }