Estilos de componentes


Atajos

Los atajos se utilizan para enlazar cualquier tipo de contenido, tanto interno como externo, y con diferentes tipos de jerarquías.

Atajo Botón


<div class="row">
  <div class="col-xs-12 text-center">
    <a class="btn btn-primary btn-lg" href="#">Ver todas las noticias</a>
  </div>
</div>
          

Atajo simple


<div class="row panels-row">

  <div class="col-xs-12 col-sm-6 col-md-3">
    <a class="panel panel-default" href="#">
      <div class="panel-body">
        <div class="media">
          <div class="media-left padding-5">
            <i class="fa fa-phone fa-fw fa-3x text-secondary"></i>
          </div>
          <div class="media-body">
            <h3>El estado del estado</h3>
            <p class="text-muted">Diagnóstico de la Administración Pública Nacional en diciembre de 2015</p>
          </div>
        </div>
      </div>
    </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    ...
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    ...
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    ...
  </div>

</div>
          

<div class="row panels-row">

  <!-- Atajo con ícono -->

  <div class="col-xs-12 col-sm-6 col-md-3">
    <a class="panel panel-default" href="#">
      <div class="panel-body">
        <h3>Ministerio de Economía</h3>
        <p class="text-muted">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
      </div>
    </a>
  </div>

  <!-- Atajo sin ícono -->

  <div class="col-xs-12 col-sm-6 col-md-3">
    <a class="panel panel-default" href="#">
      <div class="panel-body">
        <h3>Ministerio de Economía</h3>
      </div>
    </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    ...
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    ...
  </div>

</div>
          

Atajo Destacado con ícono


<div class="row panels-row">

  <div class="col-xs-12 col-sm-6 col-md-3">
    <a class="panel panel-default panel-icon panel-secondary" href="#">
      <div class="panel-heading hidden-xs"><i class="fa fa-file"></i></div>
      <div class="panel-body">
        <h3><span class="visible-xs-inline"><i class="fa fa-file text-secondary"></i>&nbsp; </span>Ministerio de Economía</h3>
        <p class="text-muted">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
      </div>
    </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    ...
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    ...
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    ...
  </div>

</div>
          

Atajo Destacado con imagen


<div class="row panels-row">

  <div class="col-xs-12 col-sm-6 col-md-3">
    <a class="panel panel-default" href="#">
      <div style="background-image:url('img/placeholder.png');" class="panel-heading"></div>
      <div class="panel-body">
        <h3>Este es el título del link</h3>
        <p class="text-muted">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
      </div>
    </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    ...
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    ...
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    ...
  </div>

</div>
          

Listados

Los listados obtienen la información de un tipo de contenido y un group audience específico de Drupal. Tienen la capacidad de seleccionar la cantidad de elementos a mostrar, paginarlos y agregar un botón para ver más.


<div class="row panels-row">

  <!-- Solo Título -->

  <div class="col-xs-12 col-sm-6 col-md-3">
    <a class="panel panel-default" href="#">
      <div class="panel-body">
        <h3>Ministerio de Economía</h3>
      </div>
    </a>
  </div>

  <!-- Título y texto -->

  <div class="col-xs-12 col-sm-6 col-md-3">
    <a class="panel panel-default" href="#">
      <div class="panel-body">
        <h3>Ministerio de Economía</h3>
        <p class="text-muted">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
      </div>
    </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    ...
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    ...
  </div>

</div>
          

<div class="row panels-row">

  <!-- Título e imagen -->

  <div class="col-xs-12 col-sm-6 col-md-3">
    <a class="panel panel-default" href="#">
      <div style="background-image:url('img/placeholder.png');" class="panel-heading"></div>
      <div class="panel-body">
        <h4>El Ministro Buryaile asistió a la apertura de la Semana Verde Internacional, en Berlín</h4>
      </div>
    </a>
  </div>

  <!-- Título, texto e imagen -->

  <div class="col-xs-12 col-sm-6 col-md-3">
    <a class="panel panel-default" href="#">
      <div style="background-image:url('img/placeholder.png');" class="panel-heading"></div>
      <div class="panel-body">
        <h4>El Ministro Buryaile asistió a la apertura de la Semana Verde Internacional, en Berlín</h4>
        <p class="text-muted">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
      </div>
    </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    ...
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    ...
  </div>

</div>
          

<div class="row panels-row">

  <div class="col-xs-12 col-sm-6 col-md-3">
    <a class="panel panel-default" href="#">
      <div style="background-image:url('img/placeholder.png');" class="panel-heading"></div>
      <div class="panel-body">
        <time>Jueves 14 de Enero del 2016</time>
        <h4>El Ministro Buryaile asistió a la apertura de la Semana Verde Internacional, en Berlín</h4>
      </div>
    </a>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    ...
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    ...
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    ...
  </div>

</div>

<div class="row">
  <div class="col-xs-12">
    <a class="btn btn-primary" href="#">Ver todas las noticias</a>
  </div>
</div>
          

<div class="row panels-row">

  <!-- 2 principales -->

  <div class="col-xs-12 col-md-6">
    <a class="panel panel-default panel-lg" href="#">
      <div style="background-image:url('img/placeholder.png');" class="panel-heading"></div>
      <div class="panel-body">
        <time>Jueves 14 de Enero del 2016</time>
        <h2>El Ministro Buryaile asistió a la apertura de la Semana Verde Internacional, en Berlín</h2>
      </div>
    </a>
  </div>

  <div class="col-xs-12 col-md-6">
    ...
  </div>

  <div class="col-xs-12 col-sm-6">
    <a class="panel panel-default" href="#">
      <div style="background-image:url('img/placeholder.png');" class="panel-heading"></div>
      <div class="panel-body">
        <time>Jueves 14 de Enero del 2016</time>
        <h4>El Ministro Buryaile asistió a la apertura de la Semana Verde Internacional, en Berlín</h4>
      </div>
    </a>
  </div>

  <!-- 4 secundarias -->

  <div class="col-xs-12 col-sm-6">
    ...
  </div>

  <div class="col-xs-12 col-sm-6">
    ...
  </div>

  <div class="col-xs-12 col-sm-6">
    ...
  </div>

</div>

<div class="row">
  <div class="col-xs-12">
    <a class="btn btn-primary">Ver todas las noticias</a>
  </div>
</div>
          

Alertas

  • Amarillo (.alert-warning)
  • Azul (.alert-info)
  • Verde (.alert-success)
  • Rojo (.alert-danger)
-->
¿Ya iniciaste tu tramite?

Seguí el estado del trámite en linea

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem ratione, illo quaerat corporis, suscipit tenetur vel iusto ullam ex ipsa ipsam recusandae nulla, accusamus officia sed! Dolores itaque expedita, repudiandae.


<!-- Alerta con ícono -->

<div class="alert alert-warning">
  <div class="media">
    <div class="media-left">
      <i class="fa fa-arrow-circle-o-right fa-fw fa-4x"></i>
    </div>
    <div class="media-body">
      <h5>¿Ya iniciaste tu tramite?</h5>
      <p class="margin-0">Seguí el <a href="http://www.mininterior.gov.ar/tramitesyservicios/estado-tramite-dni.php" target="_blank">estado del trámite en linea</a></p>
    </div>
  </div>
</div>

<!-- Alerta sin ícono -->

<div class="alert alert-warning">
  <h5>¿Ya iniciaste tu tramite?</h5>
  <p class="margin-0">Seguí el <a href="http://www.mininterior.gov.ar/tramitesyservicios/estado-tramite-dni.php" target="_blank">estado del trámite en linea</a></p>
</div>

          

Ejes

Los ejes son contenidos breves que se muestran en columnas.

Cercana

Conoce tus necesidades y adopta sus servicios a ellas.

Transparente

Brinda mayor información y certeza sobre sus actos de gobierno.

Participativa

Trabaja en equipo con los empleados públicos y la gente.


<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="icon-item">
          <i class="fa fa-users text-success"></i>
          <h3>Cercana</h3>
          <p>Conoce tus necesidades y adopta sus servicios a ellas.</p>
      </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="icon-item">
          <i class="fa fa-search text-primary"></i>
          <h3>Transparente</h3>
          <p>Brinda mayor información y certeza sobre sus actos de gobierno.</p>
      </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="icon-item">
          <i class="fa fa-users"></i>
          <h3>Participativa</h3>
          <p>Trabaja en equipo con los empleados públicos y la gente.</p>
      </div>
  </div>
</div>
          

Números destacados

Los números destacados se utilizan en landings, páginas o noticias que necesitan comunicar un resultado o medición.

392.493

Visitas últimos 30 días

+11,06% vs mes anterior

33 %

Visitas este mes

del 1 al 26 de Febrero

5 de 10

Personas conectadas

Duramente los últimos 30 días.


<div class="row numbers">
  <div class="col-md-4">
    <div class="h2 text-success">392.493</div>
    <p class="lead">Visitas últimos 30 días</p>
    <p class="text-muted">+11,06% vs mes anterior</p>
  </div>
  <div class="col-md-4">
    <div class="h2 text-gray">33 <small>%</small></div>
    <p class="lead">Visitas este mes</p>
    <p class="text-muted">del 1 al 26 de Febrero</p>
  </div>
  <div class="col-md-4">
    <div class="h2">5 <small>de 10</small></div>
    <p class="lead">Personas conectadas</p>
    <p class="text-muted">Duramente los últimos 30 días.</p>
  </div>
</div>
          

Citas

Las citas pueden ser estándares o destacadas.

“ Un Estado inteligente con servidores públicos capacitados para brindarle más y mejores servicios a los ciudadanos. Esto es el Siglo XXI y en eso trabajaremos día y noche. ”

Mauricio Macri

<blockquote>
  <p>“ Un Estado inteligente con servidores públicos capacitados para brindarle más y mejores servicios a los ciudadanos. Esto es el Siglo XXI y en eso trabajaremos día y noche. ”</p>
  <small>Mauricio Macri</small>
</blockquote>
          

Un Estado inteligente con servidores públicos capacitados para brindarle más y mejores servicios a los ciudadanos. Esto es el Siglo XXI y en eso trabajaremos día y noche.

Mauricio Macri

<blockquote class="quote-highlighted">
  <p>
    <span class="quotemark-open">“</span>
    Un Estado inteligente con servidores públicos capacitados para brindarle más y mejores servicios a los ciudadanos. Esto es el Siglo XXI y en eso trabajaremos día y noche.
    <span class="quotemark-close">”</span>
  </p>
  <small>Mauricio Macri</small>
</blockquote>
          

Referencias


Colores de texto

Los atajos se utilizan para enlazar cualquier tipo de contenido, tanto interno como externo, y con diferentes tipos de jerarquías.

Paleta principal

La paleta principal se forma de:

  • Azul (.text-primary)
  • Celeste (.text-secondary)
  • Verde (.text-success)
  • Amarillo (.text-warning)
  • Rojo (.text-danger)
  • Gris claro (.text-muted)
  • Gris oscuro (.text-gray)
  • Negro (por defecto)

Paleta extendida

La paleta extendida se forma de:

  • Fucsia (.text-fucsia)
  • Arándano (.text-arandano)
  • Uva (.text-uva)
  • Cielo (.text-cielo)
  • Verdin (.text-verdin)
  • Lima (.text-lima)
  • Maiz (.text-maiz)
  • Tomate (.text-tomate)

Colores de fondo

Los atajos se utilizan para enlazar cualquier tipo de contenido, tanto interno como externo, y con diferentes tipos de jerarquías.

Paleta principal

La paleta principal se forma de:

.bg-primary .bg-success .bg-info .bg-warning .bg-danger .bg-gray .bg-white

Paleta extendida

La paleta extendida se forma de:

.bg-fucsia .bg-arandano .bg-uva .bg-cielo .bg-verdin .bg-lima .bg-maiz .bg-tomate

Íconos

Dentro de poncho estamos trabajando en una familia de íconos que va creciendo de a poco, y de momento convive junto a Font Awesome.

Íconos en drupal

En drupal, la lista de íconos disponibles es:


fa-500px

fa-adjust

fa-adn

fa-align-center

fa-align-justify

fa-align-left

fa-align-right

fa-amazon

fa-ambulance

fa-american-sign-language-interpreting

fa-anchor

fa-android

fa-angellist

fa-angle-double-down

fa-angle-double-left

fa-angle-double-right

fa-angle-double-up

fa-angle-down

fa-angle-left

fa-angle-right

fa-angle-up

fa-apple

fa-archive

fa-area-chart

fa-arrow-circle-down

fa-arrow-circle-left

fa-arrow-circle-o-down

fa-arrow-circle-o-left

fa-arrow-circle-o-right

fa-arrow-circle-o-up

fa-arrow-circle-right

fa-arrow-circle-up

fa-arrow-down

fa-arrow-left

fa-arrow-right

fa-arrow-up

fa-arrows

fa-arrows-alt

fa-arrows-h

fa-arrows-v

fa-asl-interpreting

fa-assistive-listening-systems

fa-asterisk

fa-at

fa-audio-description

fa-automobile

fa-backward

fa-balance-scale

fa-ban

fa-bank

fa-bar-chart

fa-bar-chart-o

fa-barcode

fa-bars

fa-battery-0

fa-battery-1

fa-battery-2

fa-battery-3

fa-battery-4

fa-battery-empty

fa-battery-full

fa-battery-half

fa-battery-quarter

fa-battery-three-quarters

fa-bed

fa-beer

fa-behance

fa-behance-square

fa-bell

fa-bell-o

fa-bell-slash

fa-bell-slash-o

fa-bicycle

fa-binoculars

fa-birthday-cake

fa-bitbucket

fa-bitbucket-square

fa-bitcoin

fa-black-tie

fa-blind

fa-bluetooth

fa-bluetooth-b

fa-bold

fa-bolt

fa-bomb

fa-book

fa-bookmark

fa-bookmark-o

fa-braille

fa-briefcase

fa-btc

fa-bug

fa-building

fa-building-o

fa-bullhorn

fa-bullseye

fa-bus

fa-buysellads

fa-cab

fa-calculator

fa-calendar

fa-calendar-check-o

fa-calendar-minus-o

fa-calendar-o

fa-calendar-plus-o

fa-calendar-times-o

fa-camera

fa-camera-retro

fa-car

fa-caret-down

fa-caret-left

fa-caret-right

fa-caret-square-o-down

fa-caret-square-o-left

fa-caret-square-o-right

fa-caret-square-o-up

fa-caret-up

fa-cart-arrow-down

fa-cart-plus

fa-cc

fa-cc-amex

fa-cc-diners-club

fa-cc-discover

fa-cc-jcb

fa-cc-mastercard

fa-cc-paypal

fa-cc-stripe

fa-cc-visa

fa-certificate

fa-chain

fa-chain-broken

fa-check

fa-check-circle

fa-check-circle-o

fa-check-square

fa-check-square-o

fa-chevron-circle-down

fa-chevron-circle-left

fa-chevron-circle-right

fa-chevron-circle-up

fa-chevron-down

fa-chevron-left

fa-chevron-right

fa-chevron-up

fa-child

fa-chrome

fa-circle

fa-circle-o

fa-circle-o-notch

fa-circle-thin

fa-clipboard

fa-clock-o

fa-clone

fa-close

fa-cloud

fa-cloud-download

fa-cloud-upload

fa-cny

fa-code

fa-code-fork

fa-codepen

fa-codiepie

fa-coffee

fa-cog

fa-cogs

fa-columns

fa-comment

fa-comment-o

fa-commenting

fa-commenting-o

fa-comments

fa-comments-o

fa-compass

fa-compress

fa-connectdevelop

fa-contao

fa-copy

fa-copyright

fa-creative-commons

fa-credit-card

fa-credit-card-alt

fa-crop

fa-crosshairs

fa-css3

fa-cube

fa-cubes

fa-cut

fa-cutlery

fa-dashboard

fa-dashcube

fa-database

fa-deaf

fa-deafness

fa-dedent

fa-delicious

fa-desktop

fa-deviantart

fa-diamond

fa-digg

fa-dollar

fa-dot-circle-o

fa-download

fa-dribbble

fa-dropbox

fa-drupal

fa-edge

fa-edit

fa-eject

fa-ellipsis-h

fa-ellipsis-v

fa-empire

fa-envelope

fa-envelope-o

fa-envelope-square

fa-envira

fa-eraser

fa-eur

fa-euro

fa-exchange

fa-exclamation

fa-exclamation-circle

fa-exclamation-triangle

fa-expand

fa-expeditedssl

fa-external-link

fa-external-link-square

fa-eye

fa-eye-slash

fa-eyedropper

fa-fa

fa-facebook

fa-facebook-f

fa-facebook-official

fa-facebook-square

fa-fast-backward

fa-fast-forward

fa-fax

fa-feed

fa-female

fa-fighter-jet

fa-file

fa-file-archive-o

fa-file-audio-o

fa-file-code-o

fa-file-excel-o

fa-file-image-o

fa-file-movie-o

fa-file-o

fa-file-pdf-o

fa-file-photo-o

fa-file-picture-o

fa-file-powerpoint-o

fa-file-sound-o

fa-file-text

fa-file-text-o

fa-file-video-o

fa-file-word-o

fa-file-zip-o

fa-files-o

fa-film

fa-filter

fa-fire

fa-fire-extinguisher

fa-firefox

fa-first-order

fa-flag

fa-flag-checkered

fa-flag-o

fa-flash

fa-flask

fa-flickr

fa-floppy-o

fa-folder

fa-folder-o

fa-folder-open

fa-folder-open-o

fa-font

fa-font-awesome

fa-fonticons

fa-fort-awesome

fa-forumbee

fa-forward

fa-foursquare

fa-frown-o

fa-futbol-o

fa-gamepad

fa-gavel

fa-gbp

fa-ge

fa-gear

fa-gears

fa-genderless

fa-get-pocket

fa-gg

fa-gg-circle

fa-gift

fa-git

fa-git-square

fa-github

fa-github-alt

fa-github-square

fa-gitlab

fa-gittip

fa-glass

fa-glide

fa-glide-g

fa-globe

fa-google

fa-google-plus

fa-google-plus-circle

fa-google-plus-official

fa-google-plus-square

fa-google-wallet

fa-graduation-cap

fa-gratipay

fa-group

fa-h-square

fa-hacker-news

fa-hand-grab-o

fa-hand-lizard-o

fa-hand-o-down

fa-hand-o-left

fa-hand-o-right

fa-hand-o-up

fa-hand-paper-o

fa-hand-peace-o

fa-hand-pointer-o

fa-hand-rock-o

fa-hand-scissors-o

fa-hand-spock-o

fa-hand-stop-o

fa-hard-of-hearing

fa-hashtag

fa-hdd-o

fa-header

fa-headphones

fa-heart

fa-heart-o

fa-heartbeat

fa-history

fa-home

fa-hospital-o

fa-hotel

fa-hourglass

fa-hourglass-1

fa-hourglass-2

fa-hourglass-3

fa-hourglass-end

fa-hourglass-half

fa-hourglass-o

fa-hourglass-start

fa-houzz

fa-html5

fa-i-cursor

fa-ils

fa-image

fa-inbox

fa-indent

fa-industry

fa-info

fa-info-circle

fa-inr

fa-instagram

fa-institution

fa-internet-explorer

fa-intersex

fa-ioxhost

fa-italic

fa-joomla

fa-jpy

fa-jsfiddle

fa-key

fa-keyboard-o

fa-krw

fa-language

fa-laptop

fa-lastfm

fa-lastfm-square

fa-leaf

fa-leanpub

fa-legal

fa-lemon-o

fa-level-down

fa-level-up

fa-life-bouy

fa-life-buoy

fa-life-ring

fa-life-saver

fa-lightbulb-o

fa-line-chart

fa-link

fa-linkedin

fa-linkedin-square

fa-linux

fa-list

fa-list-alt

fa-list-ol

fa-list-ul

fa-location-arrow

fa-lock

fa-long-arrow-down

fa-long-arrow-left

fa-long-arrow-right

fa-long-arrow-up

fa-low-vision

fa-magic

fa-magnet

fa-mail-forward

fa-mail-reply

fa-mail-reply-all

fa-male

fa-map

fa-map-marker

fa-map-o

fa-map-pin

fa-map-signs

fa-mars

fa-mars-double

fa-mars-stroke

fa-mars-stroke-h

fa-mars-stroke-v

fa-maxcdn

fa-meanpath

fa-medium

fa-medkit

fa-meh-o

fa-mercury

fa-microphone

fa-microphone-slash

fa-minus

fa-minus-circle

fa-minus-square

fa-minus-square-o

fa-mixcloud

fa-mobile

fa-mobile-phone

fa-modx

fa-money

fa-moon-o

fa-mortar-board

fa-motorcycle

fa-mouse-pointer

fa-music

fa-navicon

fa-neuter

fa-newspaper-o

fa-object-group

fa-object-ungroup

fa-odnoklassniki

fa-odnoklassniki-square

fa-opencart

fa-openid

fa-opera

fa-optin-monster

fa-outdent

fa-pagelines

fa-paint-brush

fa-paper-plane

fa-paper-plane-o

fa-paperclip

fa-paragraph

fa-paste

fa-pause

fa-pause-circle

fa-pause-circle-o

fa-paw

fa-paypal

fa-pencil

fa-pencil-square

fa-pencil-square-o

fa-percent

fa-phone

fa-phone-square

fa-photo

fa-picture-o

fa-pie-chart

fa-pied-piper

fa-pied-piper-alt

fa-pied-piper-pp

fa-pinterest

fa-pinterest-p

fa-pinterest-square

fa-plane

fa-play

fa-play-circle

fa-play-circle-o

fa-plug

fa-plus

fa-plus-circle

fa-plus-square

fa-plus-square-o

fa-power-off

fa-print

fa-product-hunt

fa-puzzle-piece

fa-qq

fa-qrcode

fa-question

fa-question-circle

fa-question-circle-o

fa-quote-left

fa-quote-right

fa-ra

fa-random

fa-rebel

fa-recycle

fa-reddit

fa-reddit-alien

fa-reddit-square

fa-refresh

fa-registered

fa-remove

fa-renren

fa-reorder

fa-repeat

fa-reply

fa-reply-all

fa-resistance

fa-retweet

fa-rmb

fa-road

fa-rocket

fa-rotate-left

fa-rotate-right

fa-rouble

fa-rss

fa-rss-square

fa-rub

fa-ruble

fa-rupee

fa-safari

fa-save

fa-scissors

fa-scribd

fa-search

fa-search-minus

fa-search-plus

fa-sellsy

fa-send

fa-send-o

fa-server

fa-share

fa-share-alt

fa-share-alt-square

fa-share-square

fa-share-square-o

fa-shekel

fa-sheqel

fa-shield

fa-ship

fa-shirtsinbulk

fa-shopping-bag

fa-shopping-basket

fa-shopping-cart

fa-sign-in

fa-sign-language

fa-sign-out

fa-signal

fa-signing

fa-simplybuilt

fa-sitemap

fa-skyatlas

fa-skype

fa-slack

fa-sliders

fa-slideshare

fa-smile-o

fa-snapchat

fa-snapchat-ghost

fa-snapchat-square

fa-soccer-ball-o

fa-sort

fa-sort-alpha-asc

fa-sort-alpha-desc

fa-sort-amount-asc

fa-sort-amount-desc

fa-sort-asc

fa-sort-desc

fa-sort-down

fa-sort-numeric-asc

fa-sort-numeric-desc

fa-sort-up

fa-soundcloud

fa-space-shuttle

fa-spinner

fa-spoon

fa-spotify

fa-square

fa-square-o

fa-stack-exchange

fa-stack-overflow

fa-star

fa-star-half

fa-star-half-empty

fa-star-half-full

fa-star-half-o

fa-star-o

fa-steam

fa-steam-square

fa-step-backward

fa-step-forward

fa-stethoscope

fa-sticky-note

fa-sticky-note-o

fa-stop

fa-stop-circle

fa-stop-circle-o

fa-street-view

fa-strikethrough

fa-stumbleupon

fa-stumbleupon-circle

fa-subscript

fa-subway

fa-suitcase

fa-sun-o

fa-superscript

fa-support

fa-table

fa-tablet

fa-tachometer

fa-tag

fa-tags

fa-tasks

fa-taxi

fa-television

fa-tencent-weibo

fa-terminal

fa-text-height

fa-text-width

fa-th

fa-th-large

fa-th-list

fa-themeisle

fa-thumb-tack

fa-thumbs-down

fa-thumbs-o-down

fa-thumbs-o-up

fa-thumbs-up

fa-ticket

fa-times

fa-times-circle

fa-times-circle-o

fa-tint

fa-toggle-down

fa-toggle-left

fa-toggle-off

fa-toggle-on

fa-toggle-right

fa-toggle-up

fa-trademark

fa-train

fa-transgender

fa-transgender-alt

fa-trash

fa-trash-o

fa-tree

fa-trello

fa-tripadvisor

fa-trophy

fa-truck

fa-try

fa-tty

fa-tumblr

fa-tumblr-square

fa-turkish-lira

fa-tv

fa-twitch

fa-twitter

fa-twitter-square

fa-umbrella

fa-underline

fa-undo

fa-universal-access

fa-university

fa-unlink

fa-unlock

fa-unlock-alt

fa-unsorted

fa-upload

fa-usb

fa-usd

fa-user

fa-user-md

fa-user-plus

fa-user-secret

fa-user-times

fa-users

fa-venus

fa-venus-double

fa-venus-mars

fa-viacoin

fa-viadeo

fa-viadeo-square

fa-video-camera

fa-vimeo

fa-vimeo-square

fa-vine

fa-vk

fa-volume-control-phone

fa-volume-down

fa-volume-off

fa-volume-up

fa-warning

fa-wechat

fa-weibo

fa-weixin

fa-whatsapp

fa-wheelchair

fa-wheelchair-alt

fa-wifi

fa-wikipedia-w

fa-windows

fa-won

fa-wordpress

fa-wpbeginner

fa-wpforms

fa-wrench

fa-xing

fa-xing-square

fa-y-combinator

fa-y-combinator-square

fa-yahoo

fa-yc

fa-yc-square

fa-yelp

fa-yen

fa-yoast

fa-youtube

fa-youtube-play

fa-youtube-square