Icons - Documentation | Fluxo - Social Media Marketing Template by We Both

Icons #

Documentation and examples for using the icon components and their multiple options, like shape, colors, svgs and much more.

Font Awesome #

Fluxo is using a free version of iconset provided by Font Awesome, you can see the complete list of icons (1500+ icons) here.

To use FontAwesome, first you should place the code below which contains everything you need, within the <head> of each template or page that you want.

<link rel="stylesheet" href="css/vendor/fontawesome-all.min.css">

You need to know two bits of information to reference an icon:

its name, prefixed with fa- and
the style you want to use’s corresponding prefix.

The free version of FontAwesome has 2 styles: Solid and Brands and their prefixes are:

fas- for the solid style, and
fab- for the brands style.

Result
Code

<div class="icon text-primary">
  <i class="fas fa-cloud-sun"></i>
</div>
<div class="icon text-secondary">
  <i class="fas fa-cloud-sun"></i>
</div>
<div class="icon text-success">
  <i class="fas fa-cloud-sun"></i>
</div>
<div class="icon text-danger">
  <i class="fas fa-cloud-sun"></i>
</div>
<div class="icon text-warning">
  <i class="fas fa-cloud-sun"></i>
</div>
<div class="icon text-info">
  <i class="fas fa-cloud-sun"></i>
</div>
<div class="icon text-dark">
  <i class="fas fa-cloud-sun"></i>
</div>
<div class="icon text-primary">
  <i class="fab fa-facebook-square"></i>
</div>

<div class="icon text-secondary">
  <i class="fab fa-steam"></i>
</div>

<div class="icon text-success">
  <i class="fab fa-whatsapp-square"></i>
</div>

<div class="icon text-danger">
  <i class="fab fa-instagram"></i>
</div>

<div class="icon text-warning">
  <i class="fab fa-mailchimp"></i>
</div>

<div class="icon text-info">
  <i class="fab fa-telegram"></i>
</div>

<div class="icon text-dark">
  <i class="fab fa-medium"></i>
</div>

<div class="icon icon--rounded icon--has-shadow color--white background--brand">
  <i class="fas fa-backward"></i>
</div>
<div class="icon icon--has-shadow color--white background--success">
  <i class="fas fa-play"></i>
</div>
<div class="icon icon--circle icon--has-shadow color--white background--dark">
  <i class="fas fa-forward"></i>
</div>
<br><br>
<div class="icon icon--rounded icon--small color--white background--danger">
  <i class="fas fa-baby"></i>
</div>
<br><br>
<div class="icon icon--rounded icon--large color--white background--info">
  <i class="lead fas fa-user-graduate"></i>
</div>

Custom Icon #

FLuxo used custom svg icons by Icons 8 that could be found inside /images folder. To maintain the width of the icons add class .feature-icon to the img tag.

Result
Code

<div class="icon icon--rounded icon--has-shadow background--white">
  <img src="images/icn_fluxo_influencer.svg" alt="" class="feature-icon">
</div>

<div class="icon icon--rounded icon--has-shadow background--white">
  <img src="images/icn_fluxo_chart.svg" alt="" class="feature-icon">
</div>

<div class="icon icon--rounded icon--has-shadow background--white">
  <img src="images/icn_fluxo_cloud.svg" alt="" class="feature-icon">
</div>

<div class="icon icon--rounded icon--has-shadow background--white">
  <img src="images/icn_fluxo_stacks.svg" alt="" class="feature-icon">
</div>

<div class="icon icon--rounded icon--has-shadow background--white">
  <img src="images/icn_fluxo_users.svg" alt="" class="feature-icon">
</div>

<div class="icon icon--rounded icon--has-shadow background--white">
  <img src="images/icn_fluxo_quote.svg" alt="" class="feature-icon">
</div>

<div class="icon icon--rounded icon--has-shadow background--white">
  <img src="images/icn_fluxo_group-users.svg" alt="" class="feature-icon">
</div>

<div class="icon icon--rounded icon--has-shadow background--white">
  <img src="images/icn_fluxo_office.svg" alt="" class="feature-icon">
</div>

<div class="icon icon--rounded icon--has-shadow background--white">
  <img src="images/icn_fluxo_speaker.svg" alt="" class="feature-icon">
</div>

<div class="icon icon--rounded icon--has-shadow background--white">
  <img src="images/icn_fluxo_customer-support.svg" alt="" class="feature-icon">
</div>