From 906345d15b8a9f90de063e4afe55bdb0d1a7388a Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Fri, 14 Jun 2019 11:06:46 +0200
Subject: [PATCH] refactor: remove external icon libraries

---
 package.json                        |    3 -
 src/App.vue                         |    8 -
 src/_nav.js                         |   18 +-
 src/icons.js                        |   48 +
 src/main.js                         |    4 +-
 src/router/index.js                 |   20 +-
 src/views/Dashboard.vue             |   52 +-
 src/views/buttons/BrandButtons.vue  |  429 ++--
 src/views/icons/CoreUIIcons.vue     |   11 +-
 src/views/icons/Flags.vue           | 1016 +---------
 src/views/icons/FontAwesome.vue     | 2848 ---------------------------
 src/views/icons/SimpleLineIcons.vue |  751 -------
 12 files changed, 245 insertions(+), 4963 deletions(-)
 create mode 100644 src/icons.js
 delete mode 100644 src/views/icons/FontAwesome.vue
 delete mode 100644 src/views/icons/SimpleLineIcons.vue

diff --git a/package.json b/package.json
index a7337bd6..e0da24df 100644
--- a/package.json
+++ b/package.json
@@ -26,10 +26,7 @@
     "css-vars-ponyfill": "^1.11.1",
     "current-script-polyfill": "^1.0.0",
     "element-resize-detector": "^1.2.0",
-    "flag-icon-css": "^3.2.0",
-    "font-awesome": "^4.7.0",
     "perfect-scrollbar": "^1.4.0",
-    "simple-line-icons": "^2.4.1",
     "tooltip.js": "^1.3.1",
     "vue": "^2.6.6",
     "vue-chartjs": "^3.4.0",
diff --git a/src/App.vue b/src/App.vue
index 95a34f57..07353025 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,14 +11,6 @@ export default {
 <style lang="scss">
   // CoreUI Icons Set
   @import '~@coreui/icons/css/coreui-icons.min.css';
-  /* Import Font Awesome Icons Set */
-  $fa-font-path: '~font-awesome/fonts/';
-  @import '~font-awesome/scss/font-awesome.scss';
-  /* Import Simple Line Icons Set */
-  $simple-line-font-path: '~simple-line-icons/fonts/';
-  @import '~simple-line-icons/scss/simple-line-icons.scss';
-  /* Import Flag Icons Set */
-  @import '~flag-icon-css/css/flag-icon.min.css';
   // Import Main styles for this application
   @import 'assets/scss/style';
 </style>
diff --git a/src/_nav.js b/src/_nav.js
index cf64ed56..2504cee7 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -157,12 +157,12 @@ export default {
       icon: 'cui-pie-chart'
     },
     {
-      name: 'Icons',
+      name: 'CoreUI Icons',
       url: '/icons',
       icon: 'cui-star',
       children: [
         {
-          name: 'CoreUI Icons',
+          name: 'Icons library',
           url: '/icons/coreui-icons',
           icon: 'cui-star',
           badge: {
@@ -174,20 +174,6 @@ export default {
           name: 'Flags',
           url: '/icons/flags',
           icon: 'cui-star'
-        },
-        {
-          name: 'Font Awesome',
-          url: '/icons/font-awesome',
-          icon: 'cui-star',
-          badge: {
-            variant: 'secondary',
-            text: '4.7'
-          }
-        },
-        {
-          name: 'Simple Line Icons',
-          url: '/icons/simple-line-icons',
-          icon: 'cui-star'
         }
       ]
     },
diff --git a/src/icons.js b/src/icons.js
new file mode 100644
index 00000000..fc18d52c
--- /dev/null
+++ b/src/icons.js
@@ -0,0 +1,48 @@
+import {
+  facebook,
+  twitter,
+  linkedin,
+  flickr,
+  tumblr,
+  xing,
+  github,
+  stackOverflow,
+  youtube,
+  dribbble,
+  instagram,
+  pinterest,
+  vk,
+  yahoo,
+  behance,
+  reddit,
+  vimeo,
+  ccMastercard, ccVisa, stripe, paypal, googleWallet, ccAmex
+} from '@coreui/icons/brands'
+import { US, BR, IN, FR, ES, PL } from '@coreui/icons/flags'
+import { iconSet } from '@coreui/icons'
+
+export const iconsSet = Object.assign(
+  {},
+  iconSet,
+  { US, BR, IN, FR, ES, PL },
+  {
+    facebook,
+    twitter,
+    linkedin,
+    flickr,
+    tumblr,
+    xing,
+    github,
+    stackOverflow,
+    youtube,
+    dribbble,
+    instagram,
+    pinterest,
+    vk,
+    yahoo,
+    behance,
+    reddit,
+    vimeo,
+    ccMastercard, ccVisa, stripe, paypal, googleWallet, ccAmex
+  }
+)
diff --git a/src/main.js b/src/main.js
index df9356c6..34c8b3dd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,7 @@ import App from './App'
 import router from './router'
 import CoreuiVue from '@coreui/vue/src'
 import { CIconPlugin } from '@coreui/icons/vue'
+import { iconsSet } from './icons.js'
 
 // import CoreuiVue from '@coreui/vue'
 // import CoreuiVue from '@coreui/vue/dist/custom.common.js'
@@ -21,7 +22,8 @@ Vue.config.performance = true
 // todo
 // cssVars()
 Vue.use(CoreuiVue)
-Vue.use(CIconPlugin)
+// console.log(iconsSet)
+Vue.use(CIconPlugin, iconsSet)
 
 /* eslint-disable no-new */
 var vm = new Vue({
diff --git a/src/router/index.js b/src/router/index.js
index 146b4676..2a22e85e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -39,8 +39,6 @@ const BrandButtons = () => import('@/views/buttons/BrandButtons')
 
 // Views - Icons
 const Flags = () => import('@/views/icons/Flags')
-const FontAwesome = () => import('@/views/icons/FontAwesome')
-const SimpleLineIcons = () => import('@/views/icons/SimpleLineIcons')
 const CoreUIIcons = () => import('@/views/icons/CoreUIIcons')
 
 // Views - Notifications
@@ -62,7 +60,7 @@ Vue.use(Router)
 
 export default new Router({
   mode: 'hash', // https://router.vuejs.org/api/#mode
-  linkActiveClass: 'active',
+  linkActiveClass: 'c-active',
   scrollBehavior: () => ({ y: 0 }),
   routes: [
     {
@@ -247,31 +245,21 @@ export default new Router({
         },
         {
           path: 'icons',
-          redirect: '/icons/font-awesome',
-          name: 'Icons',
+          redirect: '/icons/coreui-icons',
+          name: 'CoreUI Icons',
           component: {
             render (c) { return c('router-view') }
           },
           children: [
             {
               path: 'coreui-icons',
-              name: 'CoreUI Icons',
+              name: 'Icons library',
               component: CoreUIIcons
             },
             {
               path: 'flags',
               name: 'Flags',
               component: Flags
-            },
-            {
-              path: 'font-awesome',
-              name: 'Font Awesome',
-              component: FontAwesome
-            },
-            {
-              path: 'simple-line-icons',
-              name: 'Simple Line Icons',
-              component: SimpleLineIcons
             }
           ]
         },
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index d03477c0..f919afe7 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -384,9 +384,6 @@
             head-variant="light"
             no-sorting
           >
-            <!-- <div slot="activity-header">
-              A tu nic
-            </div> -->
             <td slot="avatar" class="c-text-center" slot-scope="{item}">
               <div class="c-avatar">
                 <img :src="item.avatar.url" class="c-img-avatar" alt="">
@@ -410,15 +407,13 @@
               slot-scope="{item}"
               class="c-text-center"
             >
-              <i
-                class="c-h4 c-mb-0"
-                :class="flag(item.country.flag)"
-                :title="item.country.flag"
-                :id="item.country.flag"
-              ></i>
+              <CIcon
+                :name="item.country.flag"
+                height="25"
+              />
             </td>
             <td slot="usage" slot-scope="{item}">
-              <div class="clearfix">
+              <div class="c-clearfix">
                 <div class="c-float-left">
                   <strong>{{item.usage.value}}%</strong>
                 </div>
@@ -437,7 +432,10 @@
               slot-scope="{item}"
               class="c-text-center"
             >
-              <i :class="item.payment.icon" style="font-size:24px"></i>
+              <CIcon
+                :name="item.payment.icon"
+                height="25"
+              />
             </td>
             <td slot="activity" slot-scope="{item}">
               <div class="c-small c-text-muted">Last login</div>
@@ -457,7 +455,6 @@ import WidgetsSocial from './widgets/WidgetsSocial'
 import CalloutChartExample from './charts/CalloutChartExample'
 import CChartLineSimple from './charts/CChartLineSimple'
 
-
 export default {
   name: 'Dashboard',
   components: {
@@ -467,61 +464,61 @@ export default {
     WidgetsSocial,
     CChartLineSimple
   },
-  data: function () {
+  data () {
     return {
       selected: 'Month',
       tableItems: [
         {
           avatar: { url: 'img/avatars/1.jpg', status: 'success' },
           user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'USA', flag: 'us' },
+          country: { name: 'USA', flag: 'US' },
           usage: { value: 50, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Mastercard', icon: 'fa fa-cc-mastercard' },
+          payment: { name: 'Mastercard', icon: 'cc-mastercard' },
           activity: '10 sec ago'
         },
         {
           avatar: { url: 'img/avatars/2.jpg', status: 'danger' },
           user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2015' },
-          country: { name: 'Brazil', flag: 'br' },
+          country: { name: 'Brazil', flag: 'BR' },
           usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Visa', icon: 'fa fa-cc-visa' },
+          payment: { name: 'Visa', icon: 'cc-visa' },
           activity: '5 minutes ago'
         },
         {
           avatar: { url: 'img/avatars/3.jpg', status: 'warning' },
           user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'India', flag: 'in' },
+          country: { name: 'India', flag: 'IN' },
           usage: { value: 74, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Stripe', icon: 'fa fa-cc-stripe' },
+          payment: { name: 'Stripe', icon: 'stripe' },
           activity: '1 hour ago'
         },
         {
           avatar: { url: 'img/avatars/4.jpg', status: '' },
           user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'France', flag: 'fr' },
+          country: { name: 'France', flag: 'FR' },
           usage: { value: 98, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'PayPal', icon: 'fa fa-paypal' },
+          payment: { name: 'PayPal', icon: 'paypal' },
           activity: 'Last month'
         },
         {
           avatar: { url: 'img/avatars/5.jpg', status: 'success' },
           user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'Spain', flag: 'es' },
+          country: { name: 'Spain', flag: 'ES' },
           usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Google Wallet', icon: 'fa fa-google-wallet' },
+          payment: { name: 'Google Wallet', icon: 'google-wallet' },
           activity: 'Last week'
         },
         {
           avatar: { url: 'img/avatars/6.jpg', status: 'danger' },
           user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'Poland', flag: 'pl' },
+          country: { name: 'Poland', flag: 'PL' },
           usage: { value: 43, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Amex', icon: 'fa fa-cc-amex' },
+          payment: { name: 'Amex', icon: 'cc-amex' },
           activity: 'Last week'
         }
       ],
       tableFields: [
-        { key: 'avatar', _classes: 'c-text-center' },
+        { key: 'avatar', label: '', _classes: 'c-text-center' },
         { key: 'user' },
         { key: 'country', _classes: 'c-text-center' },
         { key: 'usage' },
@@ -543,9 +540,6 @@ export default {
         $variant = 'danger'
       }
       return $variant
-    },
-    flag (value) {
-      return 'flag-icon flag-icon-' + value
     }
   }
 }
diff --git a/src/views/buttons/BrandButtons.vue b/src/views/buttons/BrandButtons.vue
index ce5d6a84..1dbce303 100644
--- a/src/views/buttons/BrandButtons.vue
+++ b/src/views/buttons/BrandButtons.vue
@@ -8,154 +8,53 @@
           </CCardHeader>
           <CCardBody>
             <small>Usage </small>
-            <code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
+            <code>
+              &lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;
+            </code>
             <hr/>
             <h6>
               Size Small
               <small>Add <code>size="sm"</code></small>
             </h6>
             <p>
-              <!-- <template v-for="(brand, key) in $options.brands">
-                <button
-                  type="button"
-                  :class="`c-btn-${brand}`"
-                  class="c-btn c-btn-sm c-btn-brand c-mr-1"
+              <template v-for="(brandName, key) in $options.brands">
+                <CButton
+                  :name="brandName"
+                  size="sm"
+                  :key="key"
+                  :variant="brandName"
                 >
-                  <i :class="`fa fa-${brand}`"></i>
-                  <span>{{brand}}</span>
-                </button>
-              </template> -->
-              <CButton size="sm" class="c-mr-1 c-btn-brand" variant="facebook">
-                <i class="fa fa-facebook"></i><span>Facebook</span>
-              </CButton>
-              <CButton size="sm" class="c-mr-1 c-btn-brand" variant="twitter">
-                <i class="fa fa-twitter"></i><span>Twitter</span>
-              </CButton>
-              <CButton size="sm" variant="linkedin" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-linkedin"></i><span>LinkedIn</span>
-              </CButton>
-              <CButton size="sm" variant="flickr" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-flickr"></i><span>Flickr</span>
-              </CButton>
-              <CButton size="sm" variant="tumblr" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-tumblr"></i><span>Tumblr</span>
-              </CButton>
-              <CButton size="sm" variant="xing" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-xing"></i><span>Xing</span>
-              </CButton>
-              <CButton size="sm" variant="github" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-github"></i><span>Github</span>
-              </CButton>
-              <CButton size="sm" variant="html5" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-html5"></i><span>HTML5</span>
-              </CButton>
-              <CButton size="sm" variant="openid" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-openid"></i><span>OpenID</span>
-              </CButton>
-              <CButton size="sm" variant="stack-overflow" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-stack-overflow"></i><span>StackOverflow</span>
-              </CButton>
-              <CButton size="sm" variant="css3" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-css3"></i><span>CSS3</span>
-              </CButton>
-              <CButton size="sm" variant="youtube" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-youtube"></i><span>YouTube</span>
-              </CButton>
-              <CButton size="sm" variant="dribbble" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-dribbble"></i><span>Dribbble</span>
-              </CButton>
-              <CButton size="sm" variant="google-plus" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-google-plus"></i><span>Google+</span>
-              </CButton>
-              <CButton size="sm" variant="instagram" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-instagram"></i><span>Instagram</span>
-              </CButton>
-              <CButton size="sm" variant="pinterest" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-pinterest"></i><span>Pinterest</span>
-              </CButton>
-              <CButton size="sm" variant="vk" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-vk"></i><span>VK</span>
-              </CButton>
-              <CButton size="sm" variant="yahoo" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-yahoo"></i><span>Yahoo</span>
-              </CButton>
-              <CButton size="sm" variant="behance" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-behance"></i><span>Behance</span>
-              </CButton>
-              <CButton size="sm" variant="dropbox" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-dropbox"></i><span>Dropbox</span>
-              </CButton>
-              <CButton size="sm" variant="reddit" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-reddit"></i><span>Reddit</span>
-              </CButton>
-              <CButton size="sm" variant="spotify" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-spotify"></i><span>Spotify</span>
-              </CButton>
-              <CButton size="sm" variant="vine" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-vine"></i><span>Vine</span>
-              </CButton>
-              <CButton size="sm" variant="foursquare" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-foursquare"></i><span>Forsquare</span>
-              </CButton>
-              <CButton size="sm" variant="vimeo" class="c-mr-1 c-btn-brand">
-                <i class="fa fa-vimeo"></i><span>Vimeo</span>
-              </CButton>
+                  <CIcon :name="brandName"/>
+                  <span>{{brandName}}</span>
+                </CButton>
+              </template>
             </p>
             <h6>Size Normal</h6>
             <p>
-              <CButton variant="facebook" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
-              <CButton variant="twitter" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
-              <CButton variant="linkedin" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
-              <CButton variant="flickr" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
-              <CButton variant="tumblr" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
-              <CButton variant="xing" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
-              <CButton variant="github" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
-              <CButton variant="html5" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
-              <CButton variant="openid" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
-              <CButton variant="stack-overflow" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
-              <CButton variant="css3" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
-              <CButton variant="youtube" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
-              <CButton variant="dribbble" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
-              <CButton variant="google-plus" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
-              <CButton variant="instagram" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
-              <CButton variant="pinterest" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
-              <CButton variant="vk" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
-              <CButton variant="yahoo" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
-              <CButton variant="behance" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
-              <CButton variant="dropbox" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
-              <CButton variant="reddit" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
-              <CButton variant="spotify" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
-              <CButton variant="vine" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
-              <CButton variant="foursquare" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
-              <CButton variant="vimeo" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
+              <template v-for="(brandName, key) in $options.brands">
+                <CButton
+                  :name="brandName"
+                  :key="key"
+                  :variant="brandName"
+                >
+                  <CIcon :name="brandName"/>
+                  <span>{{brandName}}</span>
+                </CButton>
+              </template>
             </p>
             <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
             <p>
-              <CButton size="lg" variant="facebook" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
-              <CButton size="lg" variant="twitter" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
-              <CButton size="lg" variant="linkedin" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
-              <CButton size="lg" variant="flickr" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
-              <CButton size="lg" variant="tumblr" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
-              <CButton size="lg" variant="xing" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
-              <CButton size="lg" variant="github" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
-              <CButton size="lg" variant="html5" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
-              <CButton size="lg" variant="openid" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
-              <CButton size="lg" variant="stack-overflow" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
-              <CButton size="lg" variant="css3" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
-              <CButton size="lg" variant="youtube" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
-              <CButton size="lg" variant="dribbble" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
-              <CButton size="lg" variant="google-plus" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
-              <CButton size="lg" variant="instagram" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
-              <CButton size="lg" variant="pinterest" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
-              <CButton size="lg" variant="vk" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
-              <CButton size="lg" variant="yahoo" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
-              <CButton size="lg" variant="behance" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
-              <CButton size="lg" variant="dropbox" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
-              <CButton size="lg" variant="reddit" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
-              <CButton size="lg" variant="spotify" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
-              <CButton size="lg" variant="vine" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
-              <CButton size="lg" variant="foursquare" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
-              <CButton size="lg" variant="vimeo" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
+              <template v-for="(brandName, key) in $options.brands">
+                <CButton
+                  :name="brandName"
+                  size="lg"
+                  :key="key"
+                  :variant="brandName"
+                >
+                  <CIcon :name="brandName"/>
+                  <span>{{brandName}}</span>
+                </CButton>
+              </template>
             </p>
           </CCardBody>
         </CCard>
@@ -166,91 +65,48 @@
             <strong>Brand Button </strong> <small>Icons only</small>
           </CCardHeader>
           <CCardBody>
-            <small>Usage </small> <code>&lt;CButton variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
+            <small>Usage </small>
+              <code>
+                {{ `<CButton variant="facebook"><CIcon name="facebook"/></CButton>` }}
+              </code>
             <hr/>
             <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
             <p>
-              <CButton size="sm" variant="facebook icon" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i></CButton>
-              <CButton size="sm" variant="twitter icon" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i></CButton>
-              <CButton size="sm" variant="linkedin icon" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i></CButton>
-              <CButton size="sm" variant="flickr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i></CButton>
-              <CButton size="sm" variant="tumblr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i></CButton>
-              <CButton size="sm" variant="xing icon" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i></CButton>
-              <CButton size="sm" variant="github icon" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i></CButton>
-              <CButton size="sm" variant="html5 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i></CButton>
-              <CButton size="sm" variant="openid icon" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i></CButton>
-              <CButton size="sm" variant="stack-overflow icon" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
-              <CButton size="sm" variant="css3 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i></CButton>
-              <CButton size="sm" variant="youtube icon" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i></CButton>
-              <CButton size="sm" variant="dribbble icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i></CButton>
-              <CButton size="sm" variant="google-plus icon" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i></CButton>
-              <CButton size="sm" variant="instagram icon" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i></CButton>
-              <CButton size="sm" variant="pinterest icon" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i></CButton>
-              <CButton size="sm" variant="vk icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i></CButton>
-              <CButton size="sm" variant="yahoo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i></CButton>
-              <CButton size="sm" variant="behance icon" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i></CButton>
-              <CButton size="sm" variant="dropbox icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i></CButton>
-              <CButton size="sm" variant="reddit icon" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i></CButton>
-              <CButton size="sm" variant="spotify icon" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i></CButton>
-              <CButton size="sm" variant="vine icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i></CButton>
-              <CButton size="sm" variant="foursquare icon" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i></CButton>
-              <CButton size="sm" variant="vimeo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i></CButton>
+              <template v-for="(brandName, key) in $options.brands">
+                <CButton
+                  :name="brandName"
+                  size="sm"
+                  :key="key"
+                  :variant="brandName"
+                >
+                  <CIcon :name="brandName"/>
+                </CButton>
+              </template>
             </p>
             <h6>Size Normal</h6>
             <p>
-              <CButton variant="facebook icon" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i></CButton>
-              <CButton variant="twitter icon" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i></CButton>
-              <CButton variant="linkedin icon" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i></CButton>
-              <CButton variant="flickr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i></CButton>
-              <CButton variant="tumblr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i></CButton>
-              <CButton variant="xing icon" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i></CButton>
-              <CButton variant="github icon" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i></CButton>
-              <CButton variant="html5 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i></CButton>
-              <CButton variant="openid icon" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i></CButton>
-              <CButton variant="stack-overflow icon" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
-              <CButton variant="css3 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i></CButton>
-              <CButton variant="youtube icon" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i></CButton>
-              <CButton variant="dribbble icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i></CButton>
-              <CButton variant="google-plus icon" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i></CButton>
-              <CButton variant="instagram icon" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i></CButton>
-              <CButton variant="pinterest icon" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i></CButton>
-              <CButton variant="vk icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i></CButton>
-              <CButton variant="yahoo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i></CButton>
-              <CButton variant="behance icon" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i></CButton>
-              <CButton variant="dropbox icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i></CButton>
-              <CButton variant="reddit icon" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i></CButton>
-              <CButton variant="spotify icon" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i></CButton>
-              <CButton variant="vine icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i></CButton>
-              <CButton variant="foursquare icon" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i></CButton>
-              <CButton variant="vimeo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i></CButton>
+              <template v-for="(brandName, key) in $options.brands">
+                <CButton
+                  :name="brandName"
+                  :key="key"
+                  :variant="brandName"
+                >
+                  <CIcon :name="brandName"/>
+                </CButton>
+              </template>
             </p>
             <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
             <p>
-              <CButton size="lg" variant="facebook icon" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i></CButton>
-              <CButton size="lg" variant="twitter icon" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i></CButton>
-              <CButton size="lg" variant="linkedin icon" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i></CButton>
-              <CButton size="lg" variant="flickr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i></CButton>
-              <CButton size="lg" variant="tumblr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i></CButton>
-              <CButton size="lg" variant="xing icon" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i></CButton>
-              <CButton size="lg" variant="github icon" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i></CButton>
-              <CButton size="lg" variant="html5 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i></CButton>
-              <CButton size="lg" variant="openid icon" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i></CButton>
-              <CButton size="lg" variant="stack-overflow icon" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
-              <CButton size="lg" variant="css3 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i></CButton>
-              <CButton size="lg" variant="youtube icon" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i></CButton>
-              <CButton size="lg" variant="dribbble icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i></CButton>
-              <CButton size="lg" variant="google-plus icon" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i></CButton>
-              <CButton size="lg" variant="instagram icon" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i></CButton>
-              <CButton size="lg" variant="pinterest icon" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i></CButton>
-              <CButton size="lg" variant="vk icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i></CButton>
-              <CButton size="lg" variant="yahoo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i></CButton>
-              <CButton size="lg" variant="behance icon" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i></CButton>
-              <CButton size="lg" variant="dropbox icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i></CButton>
-              <CButton size="lg" variant="reddit icon" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i></CButton>
-              <CButton size="lg" variant="spotify icon" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i></CButton>
-              <CButton size="lg" variant="vine icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i></CButton>
-              <CButton size="lg" variant="foursquare icon" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i></CButton>
-              <CButton size="lg" variant="vimeo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i></CButton>
+              <template v-for="(brandName, key) in $options.brands">
+                <CButton
+                  :name="brandName"
+                  size="lg"
+                  :key="key"
+                  :variant="brandName"
+                >
+                  <CIcon :name="brandName"/>
+                </CButton>
+              </template>
             </p>
           </CCardBody>
         </CCard>
@@ -262,91 +118,45 @@
             <strong>Brand Button </strong> <small>Text only</small>
           </CCardHeader>
           <CCardBody>
-            <small>Usage </small> <code>&lt;CButton variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
+            <small>Usage </small> <code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
             <hr/>
             <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
             <p>
-              <CButton size="sm" variant="facebook text" class="c-mr-1 c-btn-brand"><span>Facebook</span></CButton>
-              <CButton size="sm" variant="twitter text" class="c-mr-1 c-btn-brand"><span>Twitter</span></CButton>
-              <CButton size="sm" variant="linkedin text" class="c-mr-1 c-btn-brand"><span>LinkedIn</span></CButton>
-              <CButton size="sm" variant="flickr text" class="c-mr-1 c-btn-brand"><span>Flickr</span></CButton>
-              <CButton size="sm" variant="tumblr text" class="c-mr-1 c-btn-brand"><span>Tumblr</span></CButton>
-              <CButton size="sm" variant="xing text" class="c-mr-1 c-btn-brand"><span>Xing</span></CButton>
-              <CButton size="sm" variant="github text" class="c-mr-1 c-btn-brand"><span>Github</span></CButton>
-              <CButton size="sm" variant="html5 text" class="c-mr-1 c-btn-brand"><span>HTML5</span></CButton>
-              <CButton size="sm" variant="openid text" class="c-mr-1 c-btn-brand"><span>OpenID</span></CButton>
-              <CButton size="sm" variant="stack-overflow text" class="c-mr-1 c-btn-brand"><span>StackOverflow</span></CButton>
-              <CButton size="sm" variant="css3 text" class="c-mr-1 c-btn-brand"><span>CSS3</span></CButton>
-              <CButton size="sm" variant="youtube text" class="c-mr-1 c-btn-brand"><span>YouTube</span></CButton>
-              <CButton size="sm" variant="dribbble text" class="c-mr-1 c-btn-brand"><span>Dribbble</span></CButton>
-              <CButton size="sm" variant="google-plus text" class="c-mr-1 c-btn-brand"><span>Google+</span></CButton>
-              <CButton size="sm" variant="instagram text" class="c-mr-1 c-btn-brand"><span>Instagram</span></CButton>
-              <CButton size="sm" variant="pinterest text" class="c-mr-1 c-btn-brand"><span>Pinterest</span></CButton>
-              <CButton size="sm" variant="vk text" class="c-mr-1 c-btn-brand"><span>VK</span></CButton>
-              <CButton size="sm" variant="yahoo text" class="c-mr-1 c-btn-brand"><span>Yahoo</span></CButton>
-              <CButton size="sm" variant="behance text" class="c-mr-1 c-btn-brand"><span>Behance</span></CButton>
-              <CButton size="sm" variant="dropbox text" class="c-mr-1 c-btn-brand"><span>Dropbox</span></CButton>
-              <CButton size="sm" variant="reddit text" class="c-mr-1 c-btn-brand"><span>Reddit</span></CButton>
-              <CButton size="sm" variant="spotify text" class="c-mr-1 c-btn-brand"><span>Spotify</span></CButton>
-              <CButton size="sm" variant="vine text" class="c-mr-1 c-btn-brand"><span>Vine</span></CButton>
-              <CButton size="sm" variant="foursquare text" class="c-mr-1 c-btn-brand"><span>Forsquare</span></CButton>
-              <CButton size="sm" variant="vimeo text" class="c-mr-1 c-btn-brand"><span>Vimeo</span></CButton>
+              <template v-for="(brandName, key) in $options.brands">
+                <CButton
+                  :name="brandName"
+                  size="sm"
+                  :key="key"
+                  :variant="brandName"
+                >
+                  <span>{{brandName}}</span>
+                </CButton>
+              </template>
             </p>
             <h6>Size Normal</h6>
             <p>
-              <CButton variant="facebook text" class="c-mr-1 c-btn-brand"><span>Facebook</span></CButton>
-              <CButton variant="twitter text" class="c-mr-1 c-btn-brand"><span>Twitter</span></CButton>
-              <CButton variant="linkedin text" class="c-mr-1 c-btn-brand"><span>LinkedIn</span></CButton>
-              <CButton variant="flickr text" class="c-mr-1 c-btn-brand"><span>Flickr</span></CButton>
-              <CButton variant="tumblr text" class="c-mr-1 c-btn-brand"><span>Tumblr</span></CButton>
-              <CButton variant="xing text" class="c-mr-1 c-btn-brand"><span>Xing</span></CButton>
-              <CButton variant="github text" class="c-mr-1 c-btn-brand"><span>Github</span></CButton>
-              <CButton variant="html5 text" class="c-mr-1 c-btn-brand"><span>HTML5</span></CButton>
-              <CButton variant="openid text" class="c-mr-1 c-btn-brand"><span>OpenID</span></CButton>
-              <CButton variant="stack-overflow text" class="c-mr-1 c-btn-brand"><span>StackOverflow</span></CButton>
-              <CButton variant="css3 text" class="c-mr-1 c-btn-brand"><span>CSS3</span></CButton>
-              <CButton variant="youtube text" class="c-mr-1 c-btn-brand"><span>YouTube</span></CButton>
-              <CButton variant="dribbble text" class="c-mr-1 c-btn-brand"><span>Dribbble</span></CButton>
-              <CButton variant="google-plus text" class="c-mr-1 c-btn-brand"><span>Google+</span></CButton>
-              <CButton variant="instagram text" class="c-mr-1 c-btn-brand"><span>Instagram</span></CButton>
-              <CButton variant="pinterest text" class="c-mr-1 c-btn-brand"><span>Pinterest</span></CButton>
-              <CButton variant="vk text" class="c-mr-1 c-btn-brand"><span>VK</span></CButton>
-              <CButton variant="yahoo text" class="c-mr-1 c-btn-brand"><span>Yahoo</span></CButton>
-              <CButton variant="behance text" class="c-mr-1 c-btn-brand"><span>Behance</span></CButton>
-              <CButton variant="dropbox text" class="c-mr-1 c-btn-brand"><span>Dropbox</span></CButton>
-              <CButton variant="reddit text" class="c-mr-1 c-btn-brand"><span>Reddit</span></CButton>
-              <CButton variant="spotify text" class="c-mr-1 c-btn-brand"><span>Spotify</span></CButton>
-              <CButton variant="vine text" class="c-mr-1 c-btn-brand"><span>Vine</span></CButton>
-              <CButton variant="foursquare text" class="c-mr-1 c-btn-brand"><span>Forsquare</span></CButton>
-              <CButton variant="vimeo text" class="c-mr-1 c-btn-brand"><span>Vimeo</span></CButton>
+              <template v-for="(brandName, key) in $options.brands">
+                <CButton
+                  :name="brandName"
+                  :key="key"
+                  :variant="brandName"
+                >
+                  <span>{{brandName}}</span>
+                </CButton>
+              </template>
             </p>
             <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
             <p>
-              <CButton size="lg" variant="facebook text" class="c-mr-1 c-btn-brand"><span>Facebook</span></CButton>
-              <CButton size="lg" variant="twitter text" class="c-mr-1 c-btn-brand"><span>Twitter</span></CButton>
-              <CButton size="lg" variant="linkedin text" class="c-mr-1 c-btn-brand"><span>LinkedIn</span></CButton>
-              <CButton size="lg" variant="flickr text" class="c-mr-1 c-btn-brand"><span>Flickr</span></CButton>
-              <CButton size="lg" variant="tumblr text" class="c-mr-1 c-btn-brand"><span>Tumblr</span></CButton>
-              <CButton size="lg" variant="xing text" class="c-mr-1 c-btn-brand"><span>Xing</span></CButton>
-              <CButton size="lg" variant="github text" class="c-mr-1 c-btn-brand"><span>Github</span></CButton>
-              <CButton size="lg" variant="html5 text" class="c-mr-1 c-btn-brand"><span>HTML5</span></CButton>
-              <CButton size="lg" variant="openid text" class="c-mr-1 c-btn-brand"><span>OpenID</span></CButton>
-              <CButton size="lg" variant="stack-overflow text" class="c-mr-1 c-btn-brand"><span>StackOverflow</span></CButton>
-              <CButton size="lg" variant="css3 text" class="c-mr-1 c-btn-brand"><span>CSS3</span></CButton>
-              <CButton size="lg" variant="youtube text" class="c-mr-1 c-btn-brand"><span>YouTube</span></CButton>
-              <CButton size="lg" variant="dribbble text" class="c-mr-1 c-btn-brand"><span>Dribbble</span></CButton>
-              <CButton size="lg" variant="google-plus text" class="c-mr-1 c-btn-brand"><span>Google+</span></CButton>
-              <CButton size="lg" variant="instagram text" class="c-mr-1 c-btn-brand"><span>Instagram</span></CButton>
-              <CButton size="lg" variant="pinterest text" class="c-mr-1 c-btn-brand"><span>Pinterest</span></CButton>
-              <CButton size="lg" variant="vk text" class="c-mr-1 c-btn-brand"><span>VK</span></CButton>
-              <CButton size="lg" variant="yahoo text" class="c-mr-1 c-btn-brand"><span>Yahoo</span></CButton>
-              <CButton size="lg" variant="behance text" class="c-mr-1 c-btn-brand"><span>Behance</span></CButton>
-              <CButton size="lg" variant="dropbox text" class="c-mr-1 c-btn-brand"><span>Dropbox</span></CButton>
-              <CButton size="lg" variant="reddit text" class="c-mr-1 c-btn-brand"><span>Reddit</span></CButton>
-              <CButton size="lg" variant="spotify text" class="c-mr-1 c-btn-brand"><span>Spotify</span></CButton>
-              <CButton size="lg" variant="vine text" class="c-mr-1 c-btn-brand"><span>Vine</span></CButton>
-              <CButton size="lg" variant="foursquare text" class="c-mr-1 c-btn-brand"><span>Forsquare</span></CButton>
-              <CButton size="lg" variant="vimeo text" class="c-mr-1 c-btn-brand"><span>Vimeo</span></CButton>
+              <template v-for="(brandName, key) in $options.brands">
+                <CButton
+                  :name="brandName"
+                  size="lg"
+                  :key="key"
+                  :variant="brandName"
+                >
+                  <span>{{brandName}}</span>
+                </CButton>
+              </template>
             </p>
           </CCardBody>
         </CCard>
@@ -358,12 +168,53 @@
 <script>
 export default {
   name: 'brand-buttons',
-  brands: ['facebook', 'twitter', 'linkedin']
+  brands: [
+    'facebook',
+    'twitter',
+    'linkedin',
+    'flickr',
+    'tumblr',
+    'xing',
+    'github',
+    'stack-overflow',
+    'youtube',
+    'dribbble',
+    'instagram',
+    'pinterest',
+    'vk',
+    'yahoo',
+    'behance',
+    'reddit',
+    'vimeo'
+  ]
+  // labels: {
+  //   facebook: 'Facebook',
+  //   twitter: 'Twitter',
+  //   linkedin: 'LinkedIn',
+  //   flickr: 'Flickr',
+  //   tumblr: 'Tumblr',
+  //   xing: 'Xing',
+  //   github: 'Github',
+  //   'stack-overflow': 'StackOverflow',
+  //   youtube: 'YouTube',
+  //   dribbble: 'Dribbble',
+  //   instagram: 'Instagram',
+  //   pinterest: 'Pinterest',
+  //   vk: 'VK',
+  //   yahoo: 'Yahoo',
+  //   behance: 'Behance',
+  //   reddit: 'Reddit',
+  //   vimeo: 'Vimeo'
+  // }
 }
 </script>
 
 <style scoped lang="css">
-.btn {
+.c-btn {
   margin-bottom: 4px;
+  margin-right: 6px;
+}
+.c-btn svg + span {
+  margin-left: 8px;
 }
 </style>
diff --git a/src/views/icons/CoreUIIcons.vue b/src/views/icons/CoreUIIcons.vue
index a88cb16a..70dd9379 100644
--- a/src/views/icons/CoreUIIcons.vue
+++ b/src/views/icons/CoreUIIcons.vue
@@ -431,14 +431,15 @@
   </div>
 </template>
 <script>
-import icons from '@coreui/icons'
-const iconNames = Object.keys(icons)
+import { iconSet } from '@coreui/icons'
+
+const iconNames = Object.keys(iconSet)
 
 export default {
   name: 'CoreUIIcons',
   iconNames,
-  mounted () {
-    console.log(this.$options.iconNames)
-  }
+  // mounted () {
+  //   console.log(this.$options.iconNames)
+  // }
 }
 </script>
diff --git a/src/views/icons/Flags.vue b/src/views/icons/Flags.vue
index a51ff33c..b023ac2a 100644
--- a/src/views/icons/Flags.vue
+++ b/src/views/icons/Flags.vue
@@ -13,1002 +13,17 @@
             span. If you want to have a squared version flag then add the class
             flag-icon-squared as well.
           </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ad c-h1" title="ad" id="ad"></i>
-            <div>flag-icon-ad</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ae c-h1" title="ae" id="ae"></i>
-            <div>flag-icon-ae</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-af c-h1" title="af" id="af"></i>
-            <div>flag-icon-af</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ag c-h1" title="ag" id="ag"></i>
-            <div>flag-icon-ag</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ai c-h1" title="ai" id="ai"></i>
-            <div>flag-icon-ai</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-al c-h1" title="al" id="al"></i>
-            <div>flag-icon-al</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-am c-h1" title="am" id="am"></i>
-            <div>flag-icon-am</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ao c-h1" title="ao" id="ao"></i>
-            <div>flag-icon-ao</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-aq c-h1" title="aq" id="aq"></i>
-            <div>flag-icon-aq</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ar c-h1" title="ar" id="ar"></i>
-            <div>flag-icon-ar</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-as c-h1" title="as" id="as"></i>
-            <div>flag-icon-as</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-at c-h1" title="at" id="at"></i>
-            <div>flag-icon-at</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-au c-h1" title="au" id="au"></i>
-            <div>flag-icon-au</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-aw c-h1" title="aw" id="aw"></i>
-            <div>flag-icon-aw</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ax c-h1" title="ax" id="ax"></i>
-            <div>flag-icon-ax</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-az c-h1" title="az" id="az"></i>
-            <div>flag-icon-az</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ba c-h1" title="ba" id="ba"></i>
-            <div>flag-icon-ba</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-bb c-h1" title="bb" id="bb"></i>
-            <div>flag-icon-bb</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-bd c-h1" title="bd" id="bd"></i>
-            <div>flag-icon-bd</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-be c-h1" title="be" id="be"></i>
-            <div>flag-icon-be</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-bf c-h1" title="bf" id="bf"></i>
-            <div>flag-icon-bf</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-bg c-h1" title="bg" id="bg"></i>
-            <div>flag-icon-bg</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-bh c-h1" title="bh" id="bh"></i>
-            <div>flag-icon-bh</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-bi c-h1" title="bi" id="bi"></i>
-            <div>flag-icon-bi</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-bj c-h1" title="bj" id="bj"></i>
-            <div>flag-icon-bj</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-bl c-h1" title="bl" id="bl"></i>
-            <div>flag-icon-bl</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-bm c-h1" title="bm" id="bm"></i>
-            <div>flag-icon-bm</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-bn c-h1" title="bn" id="bn"></i>
-            <div>flag-icon-bn</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-bo c-h1" title="bo" id="bo"></i>
-            <div>flag-icon-bo</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-bq c-h1" title="bq" id="bq"></i>
-            <div>flag-icon-bq</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-br c-h1" title="br" id="br"></i>
-            <div>flag-icon-br</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-bs c-h1" title="bs" id="bs"></i>
-            <div>flag-icon-bs</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-bt c-h1" title="bt" id="bt"></i>
-            <div>flag-icon-bt</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-bv c-h1" title="bv" id="bv"></i>
-            <div>flag-icon-bv</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-bw c-h1" title="bw" id="bw"></i>
-            <div>flag-icon-bw</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-by c-h1" title="by" id="by"></i>
-            <div>flag-icon-by</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-bz c-h1" title="bz" id="bz"></i>
-            <div>flag-icon-bz</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ca c-h1" title="ca" id="ca"></i>
-            <div>flag-icon-ca</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-cc c-h1" title="cc" id="cc"></i>
-            <div>flag-icon-cc</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-cd c-h1" title="cd" id="cd"></i>
-            <div>flag-icon-cd</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-cf c-h1" title="cf" id="cf"></i>
-            <div>flag-icon-cf</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-cg c-h1" title="cg" id="cg"></i>
-            <div>flag-icon-cg</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ch c-h1" title="ch" id="ch"></i>
-            <div>flag-icon-ch</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ci c-h1" title="ci" id="ci"></i>
-            <div>flag-icon-ci</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ck c-h1" title="ck" id="ck"></i>
-            <div>flag-icon-ck</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-cl c-h1" title="cl" id="cl"></i>
-            <div>flag-icon-cl</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-cm c-h1" title="cm" id="cm"></i>
-            <div>flag-icon-cm</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-cn c-h1" title="cn" id="cn"></i>
-            <div>flag-icon-cn</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-co c-h1" title="co" id="co"></i>
-            <div>flag-icon-co</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-cr c-h1" title="cr" id="cr"></i>
-            <div>flag-icon-cr</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-cu c-h1" title="cu" id="cu"></i>
-            <div>flag-icon-cu</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-cv c-h1" title="cv" id="cv"></i>
-            <div>flag-icon-cv</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-cw c-h1" title="cw" id="cw"></i>
-            <div>flag-icon-cw</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-cx c-h1" title="cx" id="cx"></i>
-            <div>flag-icon-cx</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-cy c-h1" title="cy" id="cy"></i>
-            <div>flag-icon-cy</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-cz c-h1" title="cz" id="cz"></i>
-            <div>flag-icon-cz</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-de c-h1" title="de" id="de"></i>
-            <div>flag-icon-de</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-dj c-h1" title="dj" id="dj"></i>
-            <div>flag-icon-dj</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-dk c-h1" title="dk" id="dk"></i>
-            <div>flag-icon-dk</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-dm c-h1" title="dm" id="dm"></i>
-            <div>flag-icon-dm</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-do c-h1" title="do" id="do"></i>
-            <div>flag-icon-do</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-dz c-h1" title="dz" id="dz"></i>
-            <div>flag-icon-dz</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ec c-h1" title="ec" id="ec"></i>
-            <div>flag-icon-ec</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ee c-h1" title="ee" id="ee"></i>
-            <div>flag-icon-ee</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-eg c-h1" title="eg" id="eg"></i>
-            <div>flag-icon-eg</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-eh c-h1" title="eh" id="eh"></i>
-            <div>flag-icon-eh</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-er c-h1" title="er" id="er"></i>
-            <div>flag-icon-er</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-es c-h1" title="es" id="es"></i>
-            <div>flag-icon-es</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-et c-h1" title="et" id="et"></i>
-            <div>flag-icon-et</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-fi c-h1" title="fi" id="fi"></i>
-            <div>flag-icon-fi</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-fj c-h1" title="fj" id="fj"></i>
-            <div>flag-icon-fj</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-fk c-h1" title="fk" id="fk"></i>
-            <div>flag-icon-fk</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-fm c-h1" title="fm" id="fm"></i>
-            <div>flag-icon-fm</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-fo c-h1" title="fo" id="fo"></i>
-            <div>flag-icon-fo</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-fr c-h1" title="fr" id="fr"></i>
-            <div>flag-icon-fr</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ga c-h1" title="ga" id="ga"></i>
-            <div>flag-icon-ga</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-gb c-h1" title="gb" id="gb"></i>
-            <div>flag-icon-gb</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-gd c-h1" title="gd" id="gd"></i>
-            <div>flag-icon-gd</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ge c-h1" title="ge" id="ge"></i>
-            <div>flag-icon-ge</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-gf c-h1" title="gf" id="gf"></i>
-            <div>flag-icon-gf</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-gg c-h1" title="gg" id="gg"></i>
-            <div>flag-icon-gg</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-gh c-h1" title="gh" id="gh"></i>
-            <div>flag-icon-gh</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-gi c-h1" title="gi" id="gi"></i>
-            <div>flag-icon-gi</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-gl c-h1" title="gl" id="gl"></i>
-            <div>flag-icon-gl</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-gm c-h1" title="gm" id="gm"></i>
-            <div>flag-icon-gm</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-gn c-h1" title="gn" id="gn"></i>
-            <div>flag-icon-gn</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-gp c-h1" title="gp" id="gp"></i>
-            <div>flag-icon-gp</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-gq c-h1" title="gq" id="gq"></i>
-            <div>flag-icon-gq</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-gr c-h1" title="gr" id="gr"></i>
-            <div>flag-icon-gr</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-gs c-h1" title="gs" id="gs"></i>
-            <div>flag-icon-gs</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-gt c-h1" title="gt" id="gt"></i>
-            <div>flag-icon-gt</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-gu c-h1" title="gu" id="gu"></i>
-            <div>flag-icon-gu</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-gw c-h1" title="gw" id="gw"></i>
-            <div>flag-icon-gw</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-gy c-h1" title="gy" id="gy"></i>
-            <div>flag-icon-gy</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-hk c-h1" title="hk" id="hk"></i>
-            <div>flag-icon-hk</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-hm c-h1" title="hm" id="hm"></i>
-            <div>flag-icon-hm</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-hn c-h1" title="hn" id="hn"></i>
-            <div>flag-icon-hn</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-hr c-h1" title="hr" id="hr"></i>
-            <div>flag-icon-hr</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ht c-h1" title="ht" id="ht"></i>
-            <div>flag-icon-ht</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-hu c-h1" title="hu" id="hu"></i>
-            <div>flag-icon-hu</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-id c-h1" title="id" id="id"></i>
-            <div>flag-icon-id</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ie c-h1" title="ie" id="ie"></i>
-            <div>flag-icon-ie</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-il c-h1" title="il" id="il"></i>
-            <div>flag-icon-il</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-im c-h1" title="im" id="im"></i>
-            <div>flag-icon-im</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-in c-h1" title="in" id="in"></i>
-            <div>flag-icon-in</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-io c-h1" title="io" id="io"></i>
-            <div>flag-icon-io</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-iq c-h1" title="iq" id="iq"></i>
-            <div>flag-icon-iq</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ir c-h1" title="ir" id="ir"></i>
-            <div>flag-icon-ir</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-is c-h1" title="is" id="is"></i>
-            <div>flag-icon-is</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-it c-h1" title="it" id="it"></i>
-            <div>flag-icon-it</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-je c-h1" title="je" id="je"></i>
-            <div>flag-icon-je</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-jm c-h1" title="jm" id="jm"></i>
-            <div>flag-icon-jm</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-jo c-h1" title="jo" id="jo"></i>
-            <div>flag-icon-jo</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-jp c-h1" title="jp" id="jp"></i>
-            <div>flag-icon-jp</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ke c-h1" title="ke" id="ke"></i>
-            <div>flag-icon-ke</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-kg c-h1" title="kg" id="kg"></i>
-            <div>flag-icon-kg</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-kh c-h1" title="kh" id="kh"></i>
-            <div>flag-icon-kh</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ki c-h1" title="ki" id="ki"></i>
-            <div>flag-icon-ki</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-km c-h1" title="km" id="km"></i>
-            <div>flag-icon-km</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-kn c-h1" title="kn" id="kn"></i>
-            <div>flag-icon-kn</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-kp c-h1" title="kp" id="kp"></i>
-            <div>flag-icon-kp</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-kr c-h1" title="kr" id="kr"></i>
-            <div>flag-icon-kr</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-kw c-h1" title="kw" id="kw"></i>
-            <div>flag-icon-kw</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ky c-h1" title="ky" id="ky"></i>
-            <div>flag-icon-ky</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-kz c-h1" title="kz" id="kz"></i>
-            <div>flag-icon-kz</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-la c-h1" title="la" id="la"></i>
-            <div>flag-icon-la</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-lb c-h1" title="lb" id="lb"></i>
-            <div>flag-icon-lb</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-lc c-h1" title="lc" id="lc"></i>
-            <div>flag-icon-lc</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-li c-h1" title="li" id="li"></i>
-            <div>flag-icon-li</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-lk c-h1" title="lk" id="lk"></i>
-            <div>flag-icon-lk</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-lr c-h1" title="lr" id="lr"></i>
-            <div>flag-icon-lr</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ls c-h1" title="ls" id="ls"></i>
-            <div>flag-icon-ls</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-lt c-h1" title="lt" id="lt"></i>
-            <div>flag-icon-lt</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-lu c-h1" title="lu" id="lu"></i>
-            <div>flag-icon-lu</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-lv c-h1" title="lv" id="lv"></i>
-            <div>flag-icon-lv</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ly c-h1" title="ly" id="ly"></i>
-            <div>flag-icon-ly</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ma c-h1" title="ma" id="ma"></i>
-            <div>flag-icon-ma</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-mc c-h1" title="mc" id="mc"></i>
-            <div>flag-icon-mc</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-md c-h1" title="md" id="md"></i>
-            <div>flag-icon-md</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-me c-h1" title="me" id="me"></i>
-            <div>flag-icon-me</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-mf c-h1" title="mf" id="mf"></i>
-            <div>flag-icon-mf</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-mg c-h1" title="mg" id="mg"></i>
-            <div>flag-icon-mg</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-mh c-h1" title="mh" id="mh"></i>
-            <div>flag-icon-mh</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-mk c-h1" title="mk" id="mk"></i>
-            <div>flag-icon-mk</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ml c-h1" title="ml" id="ml"></i>
-            <div>flag-icon-ml</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-mm c-h1" title="mm" id="mm"></i>
-            <div>flag-icon-mm</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-mn c-h1" title="mn" id="mn"></i>
-            <div>flag-icon-mn</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-mo c-h1" title="mo" id="mo"></i>
-            <div>flag-icon-mo</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-mp c-h1" title="mp" id="mp"></i>
-            <div>flag-icon-mp</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-mq c-h1" title="mq" id="mq"></i>
-            <div>flag-icon-mq</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-mr c-h1" title="mr" id="mr"></i>
-            <div>flag-icon-mr</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ms c-h1" title="ms" id="ms"></i>
-            <div>flag-icon-ms</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-mt c-h1" title="mt" id="mt"></i>
-            <div>flag-icon-mt</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-mu c-h1" title="mu" id="mu"></i>
-            <div>flag-icon-mu</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-mv c-h1" title="mv" id="mv"></i>
-            <div>flag-icon-mv</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-mw c-h1" title="mw" id="mw"></i>
-            <div>flag-icon-mw</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-mx c-h1" title="mx" id="mx"></i>
-            <div>flag-icon-mx</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-my c-h1" title="my" id="my"></i>
-            <div>flag-icon-my</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-mz c-h1" title="mz" id="mz"></i>
-            <div>flag-icon-mz</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-na c-h1" title="na" id="na"></i>
-            <div>flag-icon-na</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-nc c-h1" title="nc" id="nc"></i>
-            <div>flag-icon-nc</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ne c-h1" title="ne" id="ne"></i>
-            <div>flag-icon-ne</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-nf c-h1" title="nf" id="nf"></i>
-            <div>flag-icon-nf</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ng c-h1" title="ng" id="ng"></i>
-            <div>flag-icon-ng</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ni c-h1" title="ni" id="ni"></i>
-            <div>flag-icon-ni</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-nl c-h1" title="nl" id="nl"></i>
-            <div>flag-icon-nl</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-no c-h1" title="no" id="no"></i>
-            <div>flag-icon-no</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-np c-h1" title="np" id="np"></i>
-            <div>flag-icon-np</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-nr c-h1" title="nr" id="nr"></i>
-            <div>flag-icon-nr</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-nu c-h1" title="nu" id="nu"></i>
-            <div>flag-icon-nu</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-nz c-h1" title="nz" id="nz"></i>
-            <div>flag-icon-nz</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-om c-h1" title="om" id="om"></i>
-            <div>flag-icon-om</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-pa c-h1" title="pa" id="pa"></i>
-            <div>flag-icon-pa</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-pe c-h1" title="pe" id="pe"></i>
-            <div>flag-icon-pe</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-pf c-h1" title="pf" id="pf"></i>
-            <div>flag-icon-pf</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-pg c-h1" title="pg" id="pg"></i>
-            <div>flag-icon-pg</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ph c-h1" title="ph" id="ph"></i>
-            <div>flag-icon-ph</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-pk c-h1" title="pk" id="pk"></i>
-            <div>flag-icon-pk</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-pl c-h1" title="pl" id="pl"></i>
-            <div>flag-icon-pl</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-pm c-h1" title="pm" id="pm"></i>
-            <div>flag-icon-pm</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-pn c-h1" title="pn" id="pn"></i>
-            <div>flag-icon-pn</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-pr c-h1" title="pr" id="pr"></i>
-            <div>flag-icon-pr</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ps c-h1" title="ps" id="ps"></i>
-            <div>flag-icon-ps</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-pt c-h1" title="pt" id="pt"></i>
-            <div>flag-icon-pt</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-pw c-h1" title="pw" id="pw"></i>
-            <div>flag-icon-pw</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-py c-h1" title="py" id="py"></i>
-            <div>flag-icon-py</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-qa c-h1" title="qa" id="qa"></i>
-            <div>flag-icon-qa</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-re c-h1" title="re" id="re"></i>
-            <div>flag-icon-re</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ro c-h1" title="ro" id="ro"></i>
-            <div>flag-icon-ro</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-rs c-h1" title="rs" id="rs"></i>
-            <div>flag-icon-rs</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ru c-h1" title="ru" id="ru"></i>
-            <div>flag-icon-ru</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-rw c-h1" title="rw" id="rw"></i>
-            <div>flag-icon-rw</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-sa c-h1" title="sa" id="sa"></i>
-            <div>flag-icon-sa</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-sb c-h1" title="sb" id="sb"></i>
-            <div>flag-icon-sb</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-sc c-h1" title="sc" id="sc"></i>
-            <div>flag-icon-sc</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-sd c-h1" title="sd" id="sd"></i>
-            <div>flag-icon-sd</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-se c-h1" title="se" id="se"></i>
-            <div>flag-icon-se</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-sg c-h1" title="sg" id="sg"></i>
-            <div>flag-icon-sg</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-sh c-h1" title="sh" id="sh"></i>
-            <div>flag-icon-sh</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-si c-h1" title="si" id="si"></i>
-            <div>flag-icon-si</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-sj c-h1" title="sj" id="sj"></i>
-            <div>flag-icon-sj</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-sk c-h1" title="sk" id="sk"></i>
-            <div>flag-icon-sk</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-sl c-h1" title="sl" id="sl"></i>
-            <div>flag-icon-sl</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-sm c-h1" title="sm" id="sm"></i>
-            <div>flag-icon-sm</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-sn c-h1" title="sn" id="sn"></i>
-            <div>flag-icon-sn</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-so c-h1" title="so" id="so"></i>
-            <div>flag-icon-so</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-sr c-h1" title="sr" id="sr"></i>
-            <div>flag-icon-sr</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ss c-h1" title="ss" id="ss"></i>
-            <div>flag-icon-ss</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-st c-h1" title="st" id="st"></i>
-            <div>flag-icon-st</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-sv c-h1" title="sv" id="sv"></i>
-            <div>flag-icon-sv</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-sx c-h1" title="sx" id="sx"></i>
-            <div>flag-icon-sx</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-sy c-h1" title="sy" id="sy"></i>
-            <div>flag-icon-sy</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-sz c-h1" title="sz" id="sz"></i>
-            <div>flag-icon-sz</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-tc c-h1" title="tc" id="tc"></i>
-            <div>flag-icon-tc</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-td c-h1" title="td" id="td"></i>
-            <div>flag-icon-td</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-tf c-h1" title="tf" id="tf"></i>
-            <div>flag-icon-tf</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-tg c-h1" title="tg" id="tg"></i>
-            <div>flag-icon-tg</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-th c-h1" title="th" id="th"></i>
-            <div>flag-icon-th</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-tj c-h1" title="tj" id="tj"></i>
-            <div>flag-icon-tj</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-tk c-h1" title="tk" id="tk"></i>
-            <div>flag-icon-tk</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-tl c-h1" title="tl" id="tl"></i>
-            <div>flag-icon-tl</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-tm c-h1" title="tm" id="tm"></i>
-            <div>flag-icon-tm</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-tn c-h1" title="tn" id="tn"></i>
-            <div>flag-icon-tn</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-to c-h1" title="to" id="to"></i>
-            <div>flag-icon-to</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-tr c-h1" title="tr" id="tr"></i>
-            <div>flag-icon-tr</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-tt c-h1" title="tt" id="tt"></i>
-            <div>flag-icon-tt</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-tv c-h1" title="tv" id="tv"></i>
-            <div>flag-icon-tv</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-tw c-h1" title="tw" id="tw"></i>
-            <div>flag-icon-tw</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-tz c-h1" title="tz" id="tz"></i>
-            <div>flag-icon-tz</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ua c-h1" title="ua" id="ua"></i>
-            <div>flag-icon-ua</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ug c-h1" title="ug" id="ug"></i>
-            <div>flag-icon-ug</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-um c-h1" title="um" id="um"></i>
-            <div>flag-icon-um</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-us c-h1" title="us" id="us"></i>
-            <div>flag-icon-us</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-uy c-h1" title="uy" id="uy"></i>
-            <div>flag-icon-uy</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-uz c-h1" title="uz" id="uz"></i>
-            <div>flag-icon-uz</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-va c-h1" title="va" id="va"></i>
-            <div>flag-icon-va</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-vc c-h1" title="vc" id="vc"></i>
-            <div>flag-icon-vc</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ve c-h1" title="ve" id="ve"></i>
-            <div>flag-icon-ve</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-vg c-h1" title="vg" id="vg"></i>
-            <div>flag-icon-vg</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-vi c-h1" title="vi" id="vi"></i>
-            <div>flag-icon-vi</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-vn c-h1" title="vn" id="vn"></i>
-            <div>flag-icon-vn</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-vu c-h1" title="vu" id="vu"></i>
-            <div>flag-icon-vu</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-wf c-h1" title="wf" id="wf"></i>
-            <div>flag-icon-wf</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ws c-h1" title="ws" id="ws"></i>
-            <div>flag-icon-ws</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-ye c-h1" title="ye" id="ye"></i>
-            <div>flag-icon-ye</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-yt c-h1" title="yt" id="yt"></i>
-            <div>flag-icon-yt</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-za c-h1" title="za" id="za"></i>
-            <div>flag-icon-za</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-zm c-h1" title="zm" id="zm"></i>
-            <div>flag-icon-zm</div>
-          </CCol>
-          <CCol class="c-mb-5" col="3" sm="2">
-            <i class="flag-icon flag-icon-zw c-h1" title="zw" id="zw"></i>
-            <div>flag-icon-zw</div>
-          </CCol>
+          <template v-for="(flag, key) in displayedFlags">
+            <CCol
+              class="c-mb-5"
+              col="3" 
+              sm="2"
+              :key="key"
+            >
+              <CIcon :height="42" :content="$options.iconSet[flag]"/>
+              <div>{{flag}}</div>
+            </CCol>
+          </template>
         </CRow>
       </CCardBody>
     </CCard>
@@ -1016,7 +31,14 @@
 </template>
 
 <script>
+import { iconSet } from '@coreui/icons/flags'
 export default {
-  name: 'flags'
+  name: 'flags',
+  iconSet,
+  computed: {
+    displayedFlags () {
+      return Object.keys(this.$options.iconSet).filter(icon => !icon.includes('Q'))
+    }
+  }
 }
 </script>
diff --git a/src/views/icons/FontAwesome.vue b/src/views/icons/FontAwesome.vue
deleted file mode 100644
index 3037e8f3..00000000
--- a/src/views/icons/FontAwesome.vue
+++ /dev/null
@@ -1,2848 +0,0 @@
-<template>
-  <div class="c-animated c-fadeIn">
-    <CCard>
-      <CCardHeader>
-        <i class="fa fa-font-awesome"></i> 50 New Icons in 4.7
-      </CCardHeader>
-      <CCardBody>
-        <CRow class="c-text-center">
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-address-book fa-lg c-mt-4"></i><br/>address-book
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-address-book-o fa-lg c-mt-4"></i><br/>address-book-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-address-card fa-lg c-mt-4"></i><br/>address-card
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-address-card-o fa-lg c-mt-4"></i><br/>address-card-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bandcamp fa-lg c-mt-4"></i><br/>bandcamp
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bath fa-lg c-mt-4"></i><br/>bath
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bathtub fa-lg c-mt-4"></i><br/>bathtub <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-drivers-license fa-lg c-mt-4"></i><br/>drivers-license <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-drivers-license-o fa-lg c-mt-4"></i><br/>drivers-license-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-eercast fa-lg c-mt-4"></i><br/>eercast
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-envelope-open fa-lg c-mt-4"></i><br/>envelope-open
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-envelope-open-o fa-lg c-mt-4"></i><br/>envelope-open-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-etsy fa-lg c-mt-4"></i><br/>etsy
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-free-code-camp fa-lg c-mt-4"></i><br/>free-code-camp
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-grav fa-lg c-mt-4"></i><br/>grav
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-handshake-o fa-lg c-mt-4"></i><br/>handshake-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-id-badge fa-lg c-mt-4"></i><br/>id-badge
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-id-card fa-lg c-mt-4"></i><br/>id-card
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-id-card-o fa-lg c-mt-4"></i><br/>id-card-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-imdb fa-lg c-mt-4"></i><br/>imdb
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-linode fa-lg c-mt-4"></i><br/>linode
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-meetup fa-lg c-mt-4"></i><br/>meetup
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-microchip fa-lg c-mt-4"></i><br/>microchip
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-podcast fa-lg c-mt-4"></i><br/>podcast
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-quora fa-lg c-mt-4"></i><br/>quora
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-ravelry fa-lg c-mt-4"></i><br/>ravelry
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-s15 fa-lg c-mt-4"></i><br/>s15 <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-shower fa-lg c-mt-4"></i><br/>shower
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-snowflake-o fa-lg c-mt-4"></i><br/>snowflake-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-superpowers fa-lg c-mt-4"></i><br/>superpowers
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-telegram fa-lg c-mt-4"></i><br/>telegram
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thermometer fa-lg c-mt-4"></i><br/>thermometer <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thermometer-0 fa-lg c-mt-4"></i><br/>thermometer-0 <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thermometer-1 fa-lg c-mt-4"></i><br/>thermometer-1 <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thermometer-2 fa-lg c-mt-4"></i><br/>thermometer-2 <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thermometer-3 fa-lg c-mt-4"></i><br/>thermometer-3 <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thermometer-4 fa-lg c-mt-4"></i><br/>thermometer-4 <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thermometer-empty fa-lg c-mt-4"></i><br/>thermometer-empty
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thermometer-full fa-lg c-mt-4"></i><br/>thermometer-full
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thermometer-half fa-lg c-mt-4"></i><br/>thermometer-half
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thermometer-quarter fa-lg c-mt-4"></i><br/>thermometer-quarter
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thermometer-three-quarters fa-lg c-mt-4"></i><br/>thermometer-three-quarters
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-times-rectangle fa-lg c-mt-4"></i><br/>times-rectangle <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-times-rectangle-o fa-lg c-mt-4"></i><br/>times-rectangle-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-user-circle fa-lg c-mt-4"></i><br/>user-circle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-user-circle-o fa-lg c-mt-4"></i><br/>user-circle-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-user-o fa-lg c-mt-4"></i><br/>user-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-vcard fa-lg c-mt-4"></i><br/>vcard <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-vcard-o fa-lg c-mt-4"></i><br/>vcard-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-window-close fa-lg c-mt-4"></i><br/>window-close
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-window-close-o fa-lg c-mt-4"></i><br/>window-close-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-window-maximize fa-lg c-mt-4"></i><br/>window-maximize
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-window-minimize fa-lg c-mt-4"></i><br/>window-minimize
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-window-restore fa-lg c-mt-4"></i><br/>window-restore
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-wpexplorer fa-lg c-mt-4"></i><br/>wpexplorer
-          </CCol>
-        </CRow>
-      </CCardBody>
-    </CCard>
-    <CCard id="new">
-      <CCardHeader>20 New Icons in 4.5</CCardHeader>
-      <CCardBody>
-        <CRow class="text-center">
-
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bluetooth fa-lg c-mt-4"></i><br>bluetooth
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bluetooth-b fa-lg c-mt-4"></i><br>bluetooth-b
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-codiepie fa-lg c-mt-4"></i><br>codiepie
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-credit-card-alt fa-lg c-mt-4"></i><br>credit-card-alt
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-edge fa-lg c-mt-4"></i><br>edge
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-fort-awesome fa-lg c-mt-4"></i><br>fort-awesome
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hashtag fa-lg c-mt-4"></i><br>hashtag
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-mixcloud fa-lg c-mt-4"></i><br>mixcloud
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-modx fa-lg c-mt-4"></i><br>modx
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-pause-circle fa-lg c-mt-4"></i><br>pause-circle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-pause-circle-o fa-lg c-mt-4"></i><br>pause-circle-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-percent fa-lg c-mt-4"></i><br>percent
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-product-hunt fa-lg c-mt-4"></i><br>product-hunt
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-reddit-alien fa-lg c-mt-4"></i><br>reddit-alien
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-scribd fa-lg c-mt-4"></i><br>scribd
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-shopping-bag fa-lg c-mt-4"></i><br>shopping-bag
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-shopping-basket fa-lg c-mt-4"></i><br>shopping-basket
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-stop-circle fa-lg c-mt-4"></i><br>stop-circle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-stop-circle-o fa-lg c-mt-4"></i><br>stop-circle-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-usb fa-lg c-mt-4"></i><br>usb
-          </CCol>
-
-        </CRow>
-
-      </CCardBody>
-    </CCard>
-
-    <CCard id="web-application">
-      <CCardHeader>Web Application Icons</CCardHeader>
-      <CCardBody>
-        <CRow class="text-center">
-
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-adjust fa-lg c-mt-4"></i><br>adjust
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-anchor fa-lg c-mt-4"></i><br>anchor
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-archive fa-lg c-mt-4"></i><br>archive
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-area-chart fa-lg c-mt-4"></i><br>area-chart
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrows fa-lg c-mt-4"></i><br>arrows
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrows-h fa-lg c-mt-4"></i><br>arrows-h
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrows-v fa-lg c-mt-4"></i><br>arrows-v
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-asterisk fa-lg c-mt-4"></i><br>asterisk
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-at fa-lg c-mt-4"></i><br>at
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-automobile fa-lg c-mt-4"></i><br>automobile <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-balance-scale fa-lg c-mt-4"></i><br>balance-scale
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-ban fa-lg c-mt-4"></i><br>ban
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bank fa-lg c-mt-4"></i><br>bank <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bar-chart fa-lg c-mt-4"></i><br>bar-chart
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bar-chart-o fa-lg c-mt-4"></i><br>bar-chart-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-barcode fa-lg c-mt-4"></i><br>barcode
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bars fa-lg c-mt-4"></i><br>bars
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-battery-0 fa-lg c-mt-4"></i><br>battery-0 <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-battery-1 fa-lg c-mt-4"></i><br>battery-1 <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-battery-2 fa-lg c-mt-4"></i><br>battery-2 <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-battery-3 fa-lg c-mt-4"></i><br>battery-3 <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-battery-4 fa-lg c-mt-4"></i><br>battery-4 <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-battery-empty fa-lg c-mt-4"></i><br>battery-empty
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-battery-full fa-lg c-mt-4"></i><br>battery-full
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-battery-half fa-lg c-mt-4"></i><br>battery-half
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-battery-quarter fa-lg c-mt-4"></i><br>battery-quarter
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-battery-three-quarters fa-lg c-mt-4"></i><br>battery-three-quarters
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bed fa-lg c-mt-4"></i><br>bed
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-beer fa-lg c-mt-4"></i><br>beer
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bell fa-lg c-mt-4"></i><br>bell
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bell-o fa-lg c-mt-4"></i><br>bell-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bell-slash fa-lg c-mt-4"></i><br>bell-slash
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bell-slash-o fa-lg c-mt-4"></i><br>bell-slash-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bicycle fa-lg c-mt-4"></i><br>bicycle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-binoculars fa-lg c-mt-4"></i><br>binoculars
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-birthday-cake fa-lg c-mt-4"></i><br>birthday-cake
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bluetooth fa-lg c-mt-4"></i><br>bluetooth
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bluetooth-b fa-lg c-mt-4"></i><br>bluetooth-b
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bolt fa-lg c-mt-4"></i><br>bolt
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bomb fa-lg c-mt-4"></i><br>bomb
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-book fa-lg c-mt-4"></i><br>book
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bookmark fa-lg c-mt-4"></i><br>bookmark
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bookmark-o fa-lg c-mt-4"></i><br>bookmark-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-briefcase fa-lg c-mt-4"></i><br>briefcase
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bug fa-lg c-mt-4"></i><br>bug
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-building fa-lg c-mt-4"></i><br>building
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-building-o fa-lg c-mt-4"></i><br>building-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bullhorn fa-lg c-mt-4"></i><br>bullhorn
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bullseye fa-lg c-mt-4"></i><br>bullseye
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bus fa-lg c-mt-4"></i><br>bus
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cab fa-lg c-mt-4"></i><br>cab <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-calculator fa-lg c-mt-4"></i><br>calculator
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-calendar fa-lg c-mt-4"></i><br>calendar
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-calendar-check-o fa-lg c-mt-4"></i><br>calendar-check-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-calendar-minus-o fa-lg c-mt-4"></i><br>calendar-minus-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-calendar-o fa-lg c-mt-4"></i><br>calendar-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-calendar-plus-o fa-lg c-mt-4"></i><br>calendar-plus-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-calendar-times-o fa-lg c-mt-4"></i><br>calendar-times-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-camera fa-lg c-mt-4"></i><br>camera
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-camera-retro fa-lg c-mt-4"></i><br>camera-retro
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-car fa-lg c-mt-4"></i><br>car
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-caret-square-o-down fa-lg c-mt-4"></i><br>caret-square-o-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-caret-square-o-left fa-lg c-mt-4"></i><br>caret-square-o-left
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-caret-square-o-right fa-lg c-mt-4"></i><br>caret-square-o-right
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-caret-square-o-up fa-lg c-mt-4"></i><br>caret-square-o-up
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cart-arrow-down fa-lg c-mt-4"></i><br>cart-arrow-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cart-plus fa-lg c-mt-4"></i><br>cart-plus
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cc fa-lg c-mt-4"></i><br>cc
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-certificate fa-lg c-mt-4"></i><br>certificate
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-check fa-lg c-mt-4"></i><br>check
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-check-circle fa-lg c-mt-4"></i><br>check-circle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-check-circle-o fa-lg c-mt-4"></i><br>check-circle-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-check-square fa-lg c-mt-4"></i><br>check-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-check-square-o fa-lg c-mt-4"></i><br>check-square-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-child fa-lg c-mt-4"></i><br>child
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-circle fa-lg c-mt-4"></i><br>circle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-circle-o fa-lg c-mt-4"></i><br>circle-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-circle-o-notch fa-lg c-mt-4"></i><br>circle-o-notch
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-circle-thin fa-lg c-mt-4"></i><br>circle-thin
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-clock-o fa-lg c-mt-4"></i><br>clock-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-clone fa-lg c-mt-4"></i><br>clone
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-close fa-lg c-mt-4"></i><br>close <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cloud fa-lg c-mt-4"></i><br>cloud
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cloud-download fa-lg c-mt-4"></i><br>cloud-download
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cloud-upload fa-lg c-mt-4"></i><br>cloud-upload
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-code fa-lg c-mt-4"></i><br>code
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-code-fork fa-lg c-mt-4"></i><br>code-fork
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-coffee fa-lg c-mt-4"></i><br>coffee
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cog fa-lg c-mt-4"></i><br>cog
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cogs fa-lg c-mt-4"></i><br>cogs
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-comment fa-lg c-mt-4"></i><br>comment
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-comment-o fa-lg c-mt-4"></i><br>comment-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-commenting fa-lg c-mt-4"></i><br>commenting
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-commenting-o fa-lg c-mt-4"></i><br>commenting-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-comments fa-lg c-mt-4"></i><br>comments
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-comments-o fa-lg c-mt-4"></i><br>comments-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-compass fa-lg c-mt-4"></i><br>compass
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-copyright fa-lg c-mt-4"></i><br>copyright
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-creative-commons fa-lg c-mt-4"></i><br>creative-commons
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-credit-card fa-lg c-mt-4"></i><br>credit-card
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-credit-card-alt fa-lg c-mt-4"></i><br>credit-card-alt
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-crop fa-lg c-mt-4"></i><br>crop
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-crosshairs fa-lg c-mt-4"></i><br>crosshairs
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cube fa-lg c-mt-4"></i><br>cube
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cubes fa-lg c-mt-4"></i><br>cubes
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cutlery fa-lg c-mt-4"></i><br>cutlery
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-dashboard fa-lg c-mt-4"></i><br>dashboard <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-database fa-lg c-mt-4"></i><br>database
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-desktop fa-lg c-mt-4"></i><br>desktop
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-diamond fa-lg c-mt-4"></i><br>diamond
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-dot-circle-o fa-lg c-mt-4"></i><br>dot-circle-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-download fa-lg c-mt-4"></i><br>download
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-edit fa-lg c-mt-4"></i><br>edit <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-ellipsis-h fa-lg c-mt-4"></i><br>ellipsis-h
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-ellipsis-v fa-lg c-mt-4"></i><br>ellipsis-v
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-envelope fa-lg c-mt-4"></i><br>envelope
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-envelope-o fa-lg c-mt-4"></i><br>envelope-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-envelope-square fa-lg c-mt-4"></i><br>envelope-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-eraser fa-lg c-mt-4"></i><br>eraser
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-exchange fa-lg c-mt-4"></i><br>exchange
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-exclamation fa-lg c-mt-4"></i><br>exclamation
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-exclamation-circle fa-lg c-mt-4"></i><br>exclamation-circle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-exclamation-triangle fa-lg c-mt-4"></i><br>exclamation-triangle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-external-link fa-lg c-mt-4"></i><br>external-link
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-external-link-square fa-lg c-mt-4"></i><br>external-link-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-eye fa-lg c-mt-4"></i><br>eye
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-eye-slash fa-lg c-mt-4"></i><br>eye-slash
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-eyedropper fa-lg c-mt-4"></i><br>eyedropper
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-fax fa-lg c-mt-4"></i><br>fax
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-feed fa-lg c-mt-4"></i><br>feed <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-female fa-lg c-mt-4"></i><br>female
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-fighter-jet fa-lg c-mt-4"></i><br>fighter-jet
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-archive-o fa-lg c-mt-4"></i><br>file-archive-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-audio-o fa-lg c-mt-4"></i><br>file-audio-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-code-o fa-lg c-mt-4"></i><br>file-code-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-excel-o fa-lg c-mt-4"></i><br>file-excel-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-image-o fa-lg c-mt-4"></i><br>file-image-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-movie-o fa-lg c-mt-4"></i><br>file-movie-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-pdf-o fa-lg c-mt-4"></i><br>file-pdf-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-photo-o fa-lg c-mt-4"></i><br>file-photo-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-picture-o fa-lg c-mt-4"></i><br>file-picture-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-powerpoint-o fa-lg c-mt-4"></i><br>file-powerpoint-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-sound-o fa-lg c-mt-4"></i><br>file-sound-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-video-o fa-lg c-mt-4"></i><br>file-video-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-word-o fa-lg c-mt-4"></i><br>file-word-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-zip-o fa-lg c-mt-4"></i><br>file-zip-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-film fa-lg c-mt-4"></i><br>film
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-filter fa-lg c-mt-4"></i><br>filter
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-fire fa-lg c-mt-4"></i><br>fire
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-fire-extinguisher fa-lg c-mt-4"></i><br>fire-extinguisher
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-flag fa-lg c-mt-4"></i><br>flag
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-flag-checkered fa-lg c-mt-4"></i><br>flag-checkered
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-flag-o fa-lg c-mt-4"></i><br>flag-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-flash fa-lg c-mt-4"></i><br>flash <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-flask fa-lg c-mt-4"></i><br>flask
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-folder fa-lg c-mt-4"></i><br>folder
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-folder-o fa-lg c-mt-4"></i><br>folder-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-folder-open fa-lg c-mt-4"></i><br>folder-open
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-folder-open-o fa-lg c-mt-4"></i><br>folder-open-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-frown-o fa-lg c-mt-4"></i><br>frown-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-futbol-o fa-lg c-mt-4"></i><br>futbol-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-gamepad fa-lg c-mt-4"></i><br>gamepad
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-gavel fa-lg c-mt-4"></i><br>gavel
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-gear fa-lg c-mt-4"></i><br>gear <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-gears fa-lg c-mt-4"></i><br>gears <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-gift fa-lg c-mt-4"></i><br>gift
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-glass fa-lg c-mt-4"></i><br>glass
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-globe fa-lg c-mt-4"></i><br>globe
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-graduation-cap fa-lg c-mt-4"></i><br>graduation-cap
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-group fa-lg c-mt-4"></i><br>group <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-grab-o fa-lg c-mt-4"></i><br>hand-grab-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-lizard-o fa-lg c-mt-4"></i><br>hand-lizard-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-paper-o fa-lg c-mt-4"></i><br>hand-paper-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-peace-o fa-lg c-mt-4"></i><br>hand-peace-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-pointer-o fa-lg c-mt-4"></i><br>hand-pointer-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-rock-o fa-lg c-mt-4"></i><br>hand-rock-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-scissors-o fa-lg c-mt-4"></i><br>hand-scissors-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-spock-o fa-lg c-mt-4"></i><br>hand-spock-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-stop-o fa-lg c-mt-4"></i><br>hand-stop-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hashtag fa-lg c-mt-4"></i><br>hashtag
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hdd-o fa-lg c-mt-4"></i><br>hdd-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-headphones fa-lg c-mt-4"></i><br>headphones
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-heart fa-lg c-mt-4"></i><br>heart
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-heart-o fa-lg c-mt-4"></i><br>heart-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-heartbeat fa-lg c-mt-4"></i><br>heartbeat
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-history fa-lg c-mt-4"></i><br>history
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-home fa-lg c-mt-4"></i><br>home
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hotel fa-lg c-mt-4"></i><br>hotel <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hourglass fa-lg c-mt-4"></i><br>hourglass
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hourglass-1 fa-lg c-mt-4"></i><br>hourglass-1 <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hourglass-2 fa-lg c-mt-4"></i><br>hourglass-2 <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hourglass-3 fa-lg c-mt-4"></i><br>hourglass-3 <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hourglass-end fa-lg c-mt-4"></i><br>hourglass-end
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hourglass-half fa-lg c-mt-4"></i><br>hourglass-half
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hourglass-o fa-lg c-mt-4"></i><br>hourglass-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hourglass-start fa-lg c-mt-4"></i><br>hourglass-start
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-i-cursor fa-lg c-mt-4"></i><br>i-cursor
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-image fa-lg c-mt-4"></i><br>image <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-inbox fa-lg c-mt-4"></i><br>inbox
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-industry fa-lg c-mt-4"></i><br>industry
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-info fa-lg c-mt-4"></i><br>info
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-info-circle fa-lg c-mt-4"></i><br>info-circle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-institution fa-lg c-mt-4"></i><br>institution <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-key fa-lg c-mt-4"></i><br>key
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-keyboard-o fa-lg c-mt-4"></i><br>keyboard-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-language fa-lg c-mt-4"></i><br>language
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-laptop fa-lg c-mt-4"></i><br>laptop
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-leaf fa-lg c-mt-4"></i><br>leaf
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-legal fa-lg c-mt-4"></i><br>legal <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-lemon-o fa-lg c-mt-4"></i><br>lemon-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-level-down fa-lg c-mt-4"></i><br>level-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-level-up fa-lg c-mt-4"></i><br>level-up
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-life-bouy fa-lg c-mt-4"></i><br>life-bouy <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-life-buoy fa-lg c-mt-4"></i><br>life-buoy <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-life-ring fa-lg c-mt-4"></i><br>life-ring
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-life-saver fa-lg c-mt-4"></i><br>life-saver <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-lightbulb-o fa-lg c-mt-4"></i><br>lightbulb-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-line-chart fa-lg c-mt-4"></i><br>line-chart
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-location-arrow fa-lg c-mt-4"></i><br>location-arrow
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-lock fa-lg c-mt-4"></i><br>lock
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-magic fa-lg c-mt-4"></i><br>magic
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-magnet fa-lg c-mt-4"></i><br>magnet
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-mail-forward fa-lg c-mt-4"></i><br>mail-forward <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-mail-reply fa-lg c-mt-4"></i><br>mail-reply <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-mail-reply-all fa-lg c-mt-4"></i><br>mail-reply-all <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-male fa-lg c-mt-4"></i><br>male
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-map fa-lg c-mt-4"></i><br>map
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-map-marker fa-lg c-mt-4"></i><br>map-marker
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-map-o fa-lg c-mt-4"></i><br>map-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-map-pin fa-lg c-mt-4"></i><br>map-pin
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-map-signs fa-lg c-mt-4"></i><br>map-signs
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-meh-o fa-lg c-mt-4"></i><br>meh-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-microphone fa-lg c-mt-4"></i><br>microphone
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-microphone-slash fa-lg c-mt-4"></i><br>microphone-slash
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-minus fa-lg c-mt-4"></i><br>minus
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-minus-circle fa-lg c-mt-4"></i><br>minus-circle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-minus-square fa-lg c-mt-4"></i><br>minus-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-minus-square-o fa-lg c-mt-4"></i><br>minus-square-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-mobile fa-lg c-mt-4"></i><br>mobile
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-mobile-phone fa-lg c-mt-4"></i><br>mobile-phone <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-money fa-lg c-mt-4"></i><br>money
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-moon-o fa-lg c-mt-4"></i><br>moon-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-mortar-board fa-lg c-mt-4"></i><br>mortar-board <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-motorcycle fa-lg c-mt-4"></i><br>motorcycle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-mouse-pointer fa-lg c-mt-4"></i><br>mouse-pointer
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-music fa-lg c-mt-4"></i><br>music
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-navicon fa-lg c-mt-4"></i><br>navicon <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-newspaper-o fa-lg c-mt-4"></i><br>newspaper-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-object-group fa-lg c-mt-4"></i><br>object-group
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-object-ungroup fa-lg c-mt-4"></i><br>object-ungroup
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-paint-brush fa-lg c-mt-4"></i><br>paint-brush
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-paper-plane fa-lg c-mt-4"></i><br>paper-plane
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-paper-plane-o fa-lg c-mt-4"></i><br>paper-plane-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-paw fa-lg c-mt-4"></i><br>paw
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-pencil fa-lg c-mt-4"></i><br>pencil
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-pencil-square fa-lg c-mt-4"></i><br>pencil-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-pencil-square-o fa-lg c-mt-4"></i><br>pencil-square-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-percent fa-lg c-mt-4"></i><br>percent
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-phone fa-lg c-mt-4"></i><br>phone
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-phone-square fa-lg c-mt-4"></i><br>phone-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-photo fa-lg c-mt-4"></i><br>photo <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-picture-o fa-lg c-mt-4"></i><br>picture-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-pie-chart fa-lg c-mt-4"></i><br>pie-chart
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-plane fa-lg c-mt-4"></i><br>plane
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-plug fa-lg c-mt-4"></i><br>plug
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-plus fa-lg c-mt-4"></i><br>plus
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-plus-circle fa-lg c-mt-4"></i><br>plus-circle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-plus-square fa-lg c-mt-4"></i><br>plus-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-plus-square-o fa-lg c-mt-4"></i><br>plus-square-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-power-off fa-lg c-mt-4"></i><br>power-off
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-print fa-lg c-mt-4"></i><br>print
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-puzzle-piece fa-lg c-mt-4"></i><br>puzzle-piece
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-qrcode fa-lg c-mt-4"></i><br>qrcode
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-question fa-lg c-mt-4"></i><br>question
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-question-circle fa-lg c-mt-4"></i><br>question-circle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-quote-left fa-lg c-mt-4"></i><br>quote-left
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-quote-right fa-lg c-mt-4"></i><br>quote-right
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-random fa-lg c-mt-4"></i><br>random
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-recycle fa-lg c-mt-4"></i><br>recycle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-refresh fa-lg c-mt-4"></i><br>refresh
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-registered fa-lg c-mt-4"></i><br>registered
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-remove fa-lg c-mt-4"></i><br>remove <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-reorder fa-lg c-mt-4"></i><br>reorder <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-reply fa-lg c-mt-4"></i><br>reply
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-reply-all fa-lg c-mt-4"></i><br>reply-all
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-retweet fa-lg c-mt-4"></i><br>retweet
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-road fa-lg c-mt-4"></i><br>road
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-rocket fa-lg c-mt-4"></i><br>rocket
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-rss fa-lg c-mt-4"></i><br>rss
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-rss-square fa-lg c-mt-4"></i><br>rss-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-search fa-lg c-mt-4"></i><br>search
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-search-minus fa-lg c-mt-4"></i><br>search-minus
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-search-plus fa-lg c-mt-4"></i><br>search-plus
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-send fa-lg c-mt-4"></i><br>send <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-send-o fa-lg c-mt-4"></i><br>send-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-server fa-lg c-mt-4"></i><br>server
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-share fa-lg c-mt-4"></i><br>share
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-share-alt fa-lg c-mt-4"></i><br>share-alt
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-share-alt-square fa-lg c-mt-4"></i><br>share-alt-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-share-square fa-lg c-mt-4"></i><br>share-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-share-square-o fa-lg c-mt-4"></i><br>share-square-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-shield fa-lg c-mt-4"></i><br>shield
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-ship fa-lg c-mt-4"></i><br>ship
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-shopping-bag fa-lg c-mt-4"></i><br>shopping-bag
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-shopping-basket fa-lg c-mt-4"></i><br>shopping-basket
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-shopping-cart fa-lg c-mt-4"></i><br>shopping-cart
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sign-in fa-lg c-mt-4"></i><br>sign-in
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sign-out fa-lg c-mt-4"></i><br>sign-out
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-signal fa-lg c-mt-4"></i><br>signal
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sitemap fa-lg c-mt-4"></i><br>sitemap
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sliders fa-lg c-mt-4"></i><br>sliders
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-smile-o fa-lg c-mt-4"></i><br>smile-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-soccer-ball-o fa-lg c-mt-4"></i><br>soccer-ball-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sort fa-lg c-mt-4"></i><br>sort
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sort-alpha-asc fa-lg c-mt-4"></i><br>sort-alpha-asc
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sort-alpha-desc fa-lg c-mt-4"></i><br>sort-alpha-desc
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sort-amount-asc fa-lg c-mt-4"></i><br>sort-amount-asc
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sort-amount-desc fa-lg c-mt-4"></i><br>sort-amount-desc
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sort-asc fa-lg c-mt-4"></i><br>sort-asc
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sort-desc fa-lg c-mt-4"></i><br>sort-desc
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sort-down fa-lg c-mt-4"></i><br>sort-down <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sort-numeric-asc fa-lg c-mt-4"></i><br>sort-numeric-asc
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sort-numeric-desc fa-lg c-mt-4"></i><br>sort-numeric-desc
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sort-up fa-lg c-mt-4"></i><br>sort-up <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-space-shuttle fa-lg c-mt-4"></i><br>space-shuttle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-spinner fa-lg c-mt-4"></i><br>spinner
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-spoon fa-lg c-mt-4"></i><br>spoon
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-square fa-lg c-mt-4"></i><br>square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-square-o fa-lg c-mt-4"></i><br>square-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-star fa-lg c-mt-4"></i><br>star
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-star-half fa-lg c-mt-4"></i><br>star-half
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-star-half-empty fa-lg c-mt-4"></i><br>star-half-empty <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-star-half-full fa-lg c-mt-4"></i><br>star-half-full <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-star-half-o fa-lg c-mt-4"></i><br>star-half-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-star-o fa-lg c-mt-4"></i><br>star-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sticky-note fa-lg c-mt-4"></i><br>sticky-note
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sticky-note-o fa-lg c-mt-4"></i><br>sticky-note-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-street-view fa-lg c-mt-4"></i><br>street-view
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-suitcase fa-lg c-mt-4"></i><br>suitcase
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sun-o fa-lg c-mt-4"></i><br>sun-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-support fa-lg c-mt-4"></i><br>support <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-tablet fa-lg c-mt-4"></i><br>tablet
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-tachometer fa-lg c-mt-4"></i><br>tachometer
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-tag fa-lg c-mt-4"></i><br>tag
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-tags fa-lg c-mt-4"></i><br>tags
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-tasks fa-lg c-mt-4"></i><br>tasks
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-taxi fa-lg c-mt-4"></i><br>taxi
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-television fa-lg c-mt-4"></i><br>television
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-terminal fa-lg c-mt-4"></i><br>terminal
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thumb-tack fa-lg c-mt-4"></i><br>thumb-tack
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thumbs-down fa-lg c-mt-4"></i><br>thumbs-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thumbs-o-down fa-lg c-mt-4"></i><br>thumbs-o-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thumbs-o-up fa-lg c-mt-4"></i><br>thumbs-o-up
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thumbs-up fa-lg c-mt-4"></i><br>thumbs-up
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-ticket fa-lg c-mt-4"></i><br>ticket
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-times fa-lg c-mt-4"></i><br>times
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-times-circle fa-lg c-mt-4"></i><br>times-circle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-times-circle-o fa-lg c-mt-4"></i><br>times-circle-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-tint fa-lg c-mt-4"></i><br>tint
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-toggle-down fa-lg c-mt-4"></i><br>toggle-down <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-toggle-left fa-lg c-mt-4"></i><br>toggle-left <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-toggle-off fa-lg c-mt-4"></i><br>toggle-off
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-toggle-on fa-lg c-mt-4"></i><br>toggle-on
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-toggle-right fa-lg c-mt-4"></i><br>toggle-right <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-toggle-up fa-lg c-mt-4"></i><br>toggle-up <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-trademark fa-lg c-mt-4"></i><br>trademark
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-trash fa-lg c-mt-4"></i><br>trash
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-trash-o fa-lg c-mt-4"></i><br>trash-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-tree fa-lg c-mt-4"></i><br>tree
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-trophy fa-lg c-mt-4"></i><br>trophy
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-truck fa-lg c-mt-4"></i><br>truck
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-tty fa-lg c-mt-4"></i><br>tty
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-tv fa-lg c-mt-4"></i><br>tv <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-umbrella fa-lg c-mt-4"></i><br>umbrella
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-university fa-lg c-mt-4"></i><br>university
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-unlock fa-lg c-mt-4"></i><br>unlock
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-unlock-alt fa-lg c-mt-4"></i><br>unlock-alt
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-unsorted fa-lg c-mt-4"></i><br>unsorted <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-upload fa-lg c-mt-4"></i><br>upload
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-user fa-lg c-mt-4"></i><br>user
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-user-plus fa-lg c-mt-4"></i><br>user-plus
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-user-secret fa-lg c-mt-4"></i><br>user-secret
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-user-times fa-lg c-mt-4"></i><br>user-times
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-users fa-lg c-mt-4"></i><br>users
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-video-camera fa-lg c-mt-4"></i><br>video-camera
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-volume-down fa-lg c-mt-4"></i><br>volume-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-volume-off fa-lg c-mt-4"></i><br>volume-off
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-volume-up fa-lg c-mt-4"></i><br>volume-up
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-warning fa-lg c-mt-4"></i><br>warning <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-wheelchair fa-lg c-mt-4"></i><br>wheelchair
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-wifi fa-lg c-mt-4"></i><br>wifi
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-wrench fa-lg c-mt-4"></i><br>wrench
-          </CCol>
-
-        </CRow>
-      </CCardBody>
-
-    </CCard>
-
-    <CCard id="hand">
-      <CCardHeader>Hand Icons</CCardHeader>
-      <CCardBody>
-        <CRow class="text-center">
-
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-grab-o fa-lg c-mt-4"></i><br>hand-grab-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-lizard-o fa-lg c-mt-4"></i><br>hand-lizard-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-o-down fa-lg c-mt-4"></i><br>hand-o-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-o-left fa-lg c-mt-4"></i><br>hand-o-left
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-o-right fa-lg c-mt-4"></i><br>hand-o-right
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-o-up fa-lg c-mt-4"></i><br>hand-o-up
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-paper-o fa-lg c-mt-4"></i><br>hand-paper-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-peace-o fa-lg c-mt-4"></i><br>hand-peace-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-pointer-o fa-lg c-mt-4"></i><br>hand-pointer-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-rock-o fa-lg c-mt-4"></i><br>hand-rock-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-scissors-o fa-lg c-mt-4"></i><br>hand-scissors-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-spock-o fa-lg c-mt-4"></i><br>hand-spock-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-stop-o fa-lg c-mt-4"></i><br>hand-stop-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thumbs-down fa-lg c-mt-4"></i><br>thumbs-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thumbs-o-down fa-lg c-mt-4"></i><br>thumbs-o-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thumbs-o-up fa-lg c-mt-4"></i><br>thumbs-o-up
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-thumbs-up fa-lg c-mt-4"></i><br>thumbs-up
-          </CCol>
-
-        </CRow>
-      </CCardBody>
-
-    </CCard>
-
-    <CCard id="transportation">
-      <CCardHeader>Transportation Icons</CCardHeader>
-      <CCardBody>
-        <CRow class="text-center">
-
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-ambulance fa-lg c-mt-4"></i><br>ambulance
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-automobile fa-lg c-mt-4"></i><br>automobile <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bicycle fa-lg c-mt-4"></i><br>bicycle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bus fa-lg c-mt-4"></i><br>bus
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cab fa-lg c-mt-4"></i><br>cab <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-car fa-lg c-mt-4"></i><br>car
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-fighter-jet fa-lg c-mt-4"></i><br>fighter-jet
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-motorcycle fa-lg c-mt-4"></i><br>motorcycle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-plane fa-lg c-mt-4"></i><br>plane
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-rocket fa-lg c-mt-4"></i><br>rocket
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-ship fa-lg c-mt-4"></i><br>ship
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-space-shuttle fa-lg c-mt-4"></i><br>space-shuttle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-subway fa-lg c-mt-4"></i><br>subway
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-taxi fa-lg c-mt-4"></i><br>taxi
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-train fa-lg c-mt-4"></i><br>train
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-truck fa-lg c-mt-4"></i><br>truck
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-wheelchair fa-lg c-mt-4"></i><br>wheelchair
-          </CCol>
-
-        </CRow>
-      </CCardBody>
-    </CCard>
-
-    <CCard id="gender">
-      <CCardHeader>Gender Icons</CCardHeader>
-      <CCardBody>
-        <CRow class="text-center">
-
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-genderless fa-lg c-mt-4"></i><br>genderless
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-intersex fa-lg c-mt-4"></i><br>intersex <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-mars fa-lg c-mt-4"></i><br>mars
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-mars-double fa-lg c-mt-4"></i><br>mars-double
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-mars-stroke fa-lg c-mt-4"></i><br>mars-stroke
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-mars-stroke-h fa-lg c-mt-4"></i><br>mars-stroke-h
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-mars-stroke-v fa-lg c-mt-4"></i><br>mars-stroke-v
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-mercury fa-lg c-mt-4"></i><br>mercury
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-neuter fa-lg c-mt-4"></i><br>neuter
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-transgender fa-lg c-mt-4"></i><br>transgender
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-transgender-alt fa-lg c-mt-4"></i><br>transgender-alt
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-venus fa-lg c-mt-4"></i><br>venus
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-venus-double fa-lg c-mt-4"></i><br>venus-double
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-venus-mars fa-lg c-mt-4"></i><br>venus-mars
-          </CCol>
-
-        </CRow>
-      </CCardBody>
-    </CCard>
-
-    <CCard id="file-type">
-      <CCardHeader>File Type Icons</CCardHeader>
-      <CCardBody>
-        <CRow class="text-center">
-
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file fa-lg c-mt-4"></i><br>file
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-archive-o fa-lg c-mt-4"></i><br>file-archive-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-audio-o fa-lg c-mt-4"></i><br>file-audio-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-code-o fa-lg c-mt-4"></i><br>file-code-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-excel-o fa-lg c-mt-4"></i><br>file-excel-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-image-o fa-lg c-mt-4"></i><br>file-image-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-movie-o fa-lg c-mt-4"></i><br>file-movie-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-o fa-lg c-mt-4"></i><br>file-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-pdf-o fa-lg c-mt-4"></i><br>file-pdf-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-photo-o fa-lg c-mt-4"></i><br>file-photo-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-picture-o fa-lg c-mt-4"></i><br>file-picture-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-powerpoint-o fa-lg c-mt-4"></i><br>file-powerpoint-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-sound-o fa-lg c-mt-4"></i><br>file-sound-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-text fa-lg c-mt-4"></i><br>file-text
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-text-o fa-lg c-mt-4"></i><br>file-text-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-video-o fa-lg c-mt-4"></i><br>file-video-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-word-o fa-lg c-mt-4"></i><br>file-word-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-zip-o fa-lg c-mt-4"></i><br>file-zip-o <span class="text-muted">(alias)</span>
-          </CCol>
-
-        </CRow>
-      </CCardBody>
-    </CCard>
-
-    <CCard id="spinner">
-      <CCardHeader>Spinner Icons</CCardHeader>
-      <CCardBody>
-        <div class="alert alert-success">
-          <ul class="fa-ul">
-            <li>
-              <i class="fa fa-info-circle fa-li"></i>
-              These icons work great with the <code>fa-spin</code> class.
-            </li>
-          </ul>
-        </div>
-        <CRow class="text-center">
-
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-circle-o-notch fa-lg c-mt-4 fa-spin"></i><br>circle-o-notch
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cog fa-lg c-mt-4"></i><br>cog
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-gear fa-lg c-mt-4"></i><br>gear <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-refresh fa-lg c-mt-4"></i><br>refresh
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-spinner fa-lg c-mt-4"></i><br>spinner
-          </CCol>
-
-        </CRow>
-      </CCardBody>
-    </CCard>
-
-    <CCard id="form-control">
-      <CCardHeader>Form Control Icons</CCardHeader>
-      <CCardBody>
-        <CRow class="text-center">
-
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-check-square fa-lg c-mt-4"></i><br>check-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-check-square-o fa-lg c-mt-4"></i><br>check-square-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-circle fa-lg c-mt-4"></i><br>circle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-circle-o fa-lg c-mt-4"></i><br>circle-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-dot-circle-o fa-lg c-mt-4"></i><br>dot-circle-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-minus-square fa-lg c-mt-4"></i><br>minus-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-minus-square-o fa-lg c-mt-4"></i><br>minus-square-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-plus-square fa-lg c-mt-4"></i><br>plus-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-plus-square-o fa-lg c-mt-4"></i><br>plus-square-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-square fa-lg c-mt-4"></i><br>square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-square-o fa-lg c-mt-4"></i><br>square-o
-          </CCol>
-
-        </CRow>
-      </CCardBody>
-    </CCard>
-
-    <CCard id="payment">
-      <CCardHeader>Payment Icons</CCardHeader>
-      <CCardBody>
-        <CRow class="text-center">
-
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cc-amex fa-lg c-mt-4"></i><br>cc-amex
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cc-diners-club fa-lg c-mt-4"></i><br>cc-diners-club
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cc-discover fa-lg c-mt-4"></i><br>cc-discover
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cc-jcb fa-lg c-mt-4"></i><br>cc-jcb
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cc-mastercard fa-lg c-mt-4"></i><br>cc-mastercard
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cc-paypal fa-lg c-mt-4"></i><br>cc-paypal
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cc-stripe fa-lg c-mt-4"></i><br>cc-stripe
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cc-visa fa-lg c-mt-4"></i><br>cc-visa
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-credit-card fa-lg c-mt-4"></i><br>credit-card
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-credit-card-alt fa-lg c-mt-4"></i><br>credit-card-alt
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-google-wallet fa-lg c-mt-4"></i><br>google-wallet
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-paypal fa-lg c-mt-4"></i><br>paypal
-          </CCol>
-
-        </CRow>
-      </CCardBody>
-    </CCard>
-
-    <CCard id="chart">
-      <CCardHeader>Chart Icons</CCardHeader>
-      <CCardBody>
-        <CRow class="text-center">
-
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-area-chart fa-lg c-mt-4"></i><br>area-chart
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bar-chart fa-lg c-mt-4"></i><br>bar-chart
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bar-chart-o fa-lg c-mt-4"></i><br>bar-chart-o <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-line-chart fa-lg c-mt-4"></i><br>line-chart
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-pie-chart fa-lg c-mt-4"></i><br>pie-chart
-          </CCol>
-
-        </CRow>
-      </CCardBody>
-    </CCard>
-
-    <CCard id="currency">
-      <CCardHeader>Currency Icons</CCardHeader>
-      <CCardBody>
-        <CRow class="text-center">
-
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bitcoin fa-lg c-mt-4"></i><br>bitcoin <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-btc fa-lg c-mt-4"></i><br>btc
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cny fa-lg c-mt-4"></i><br>cny <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-dollar fa-lg c-mt-4"></i><br>dollar <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-eur fa-lg c-mt-4"></i><br>eur
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-euro fa-lg c-mt-4"></i><br>euro <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-gbp fa-lg c-mt-4"></i><br>gbp
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-gg fa-lg c-mt-4"></i><br>gg
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-gg-circle fa-lg c-mt-4"></i><br>gg-circle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-ils fa-lg c-mt-4"></i><br>ils
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-inr fa-lg c-mt-4"></i><br>inr
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-jpy fa-lg c-mt-4"></i><br>jpy
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-krw fa-lg c-mt-4"></i><br>krw
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-money fa-lg c-mt-4"></i><br>money
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-rmb fa-lg c-mt-4"></i><br>rmb <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-rouble fa-lg c-mt-4"></i><br>rouble <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-rub fa-lg c-mt-4"></i><br>rub
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-ruble fa-lg c-mt-4"></i><br>ruble <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-rupee fa-lg c-mt-4"></i><br>rupee <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-shekel fa-lg c-mt-4"></i><br>shekel <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sheqel fa-lg c-mt-4"></i><br>sheqel <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-try fa-lg c-mt-4"></i><br>try
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-turkish-lira fa-lg c-mt-4"></i><br>turkish-lira <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-usd fa-lg c-mt-4"></i><br>usd
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-won fa-lg c-mt-4"></i><br>won <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-yen fa-lg c-mt-4"></i><br>yen <span class="text-muted">(alias)</span>
-          </CCol>
-
-        </CRow>
-      </CCardBody>
-    </CCard>
-
-    <CCard id="text-editor">
-      <CCardHeader>Text Editor Icons</CCardHeader>
-      <CCardBody>
-        <CRow class="text-center">
-
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-align-center fa-lg c-mt-4"></i><br>align-center
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-align-justify fa-lg c-mt-4"></i><br>align-justify
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-align-left fa-lg c-mt-4"></i><br>align-left
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-align-right fa-lg c-mt-4"></i><br>align-right
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bold fa-lg c-mt-4"></i><br>bold
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-chain fa-lg c-mt-4"></i><br>chain <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-chain-broken fa-lg c-mt-4"></i><br>chain-broken
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-clipboard fa-lg c-mt-4"></i><br>clipboard
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-columns fa-lg c-mt-4"></i><br>columns
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-copy fa-lg c-mt-4"></i><br>copy <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cut fa-lg c-mt-4"></i><br>cut <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-dedent fa-lg c-mt-4"></i><br>dedent <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-eraser fa-lg c-mt-4"></i><br>eraser
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file fa-lg c-mt-4"></i><br>file
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-o fa-lg c-mt-4"></i><br>file-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-text fa-lg c-mt-4"></i><br>file-text
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-file-text-o fa-lg c-mt-4"></i><br>file-text-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-files-o fa-lg c-mt-4"></i><br>files-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-floppy-o fa-lg c-mt-4"></i><br>floppy-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-font fa-lg c-mt-4"></i><br>font
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-header fa-lg c-mt-4"></i><br>header
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-indent fa-lg c-mt-4"></i><br>indent
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-italic fa-lg c-mt-4"></i><br>italic
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-link fa-lg c-mt-4"></i><br>link
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-list fa-lg c-mt-4"></i><br>list
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-list-alt fa-lg c-mt-4"></i><br>list-alt
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-list-ol fa-lg c-mt-4"></i><br>list-ol
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-list-ul fa-lg c-mt-4"></i><br>list-ul
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-outdent fa-lg c-mt-4"></i><br>outdent
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-paperclip fa-lg c-mt-4"></i><br>paperclip
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-paragraph fa-lg c-mt-4"></i><br>paragraph
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-paste fa-lg c-mt-4"></i><br>paste <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-repeat fa-lg c-mt-4"></i><br>repeat
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-rotate-left fa-lg c-mt-4"></i><br>rotate-left <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-rotate-right fa-lg c-mt-4"></i><br>rotate-right <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-save fa-lg c-mt-4"></i><br>save <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-scissors fa-lg c-mt-4"></i><br>scissors
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-strikethrough fa-lg c-mt-4"></i><br>strikethrough
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-subscript fa-lg c-mt-4"></i><br>subscript
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-superscript fa-lg c-mt-4"></i><br>superscript
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-table fa-lg c-mt-4"></i><br>table
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-text-height fa-lg c-mt-4"></i><br>text-height
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-text-width fa-lg c-mt-4"></i><br>text-width
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-th fa-lg c-mt-4"></i><br>th
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-th-large fa-lg c-mt-4"></i><br>th-large
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-th-list fa-lg c-mt-4"></i><br>th-list
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-underline fa-lg c-mt-4"></i><br>underline
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-undo fa-lg c-mt-4"></i><br>undo
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-unlink fa-lg c-mt-4"></i><br>unlink <span class="text-muted">(alias)</span>
-          </CCol>
-
-        </CRow>
-      </CCardBody>
-    </CCard>
-
-    <CCard id="directional">
-      <CCardHeader>Directional Icons</CCardHeader>
-      <CCardBody>
-        <CRow class="text-center">
-
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-angle-double-down fa-lg c-mt-4"></i><br>angle-double-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-angle-double-left fa-lg c-mt-4"></i><br>angle-double-left
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-angle-double-right fa-lg c-mt-4"></i><br>angle-double-right
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-angle-double-up fa-lg c-mt-4"></i><br>angle-double-up
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-angle-down fa-lg c-mt-4"></i><br>angle-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-angle-left fa-lg c-mt-4"></i><br>angle-left
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-angle-right fa-lg c-mt-4"></i><br>angle-right
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-angle-up fa-lg c-mt-4"></i><br>angle-up
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrow-circle-down fa-lg c-mt-4"></i><br>arrow-circle-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrow-circle-left fa-lg c-mt-4"></i><br>arrow-circle-left
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrow-circle-o-down fa-lg c-mt-4"></i><br>arrow-circle-o-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrow-circle-o-left fa-lg c-mt-4"></i><br>arrow-circle-o-left
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrow-circle-o-right fa-lg c-mt-4"></i><br>arrow-circle-o-right
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrow-circle-o-up fa-lg c-mt-4"></i><br>arrow-circle-o-up
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrow-circle-right fa-lg c-mt-4"></i><br>arrow-circle-right
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrow-circle-up fa-lg c-mt-4"></i><br>arrow-circle-up
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrow-down fa-lg c-mt-4"></i><br>arrow-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrow-left fa-lg c-mt-4"></i><br>arrow-left
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrow-right fa-lg c-mt-4"></i><br>arrow-right
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrow-up fa-lg c-mt-4"></i><br>arrow-up
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrows fa-lg c-mt-4"></i><br>arrows
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrows-alt fa-lg c-mt-4"></i><br>arrows-alt
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrows-h fa-lg c-mt-4"></i><br>arrows-h
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrows-v fa-lg c-mt-4"></i><br>arrows-v
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-caret-down fa-lg c-mt-4"></i><br>caret-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-caret-left fa-lg c-mt-4"></i><br>caret-left
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-caret-right fa-lg c-mt-4"></i><br>caret-right
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-caret-square-o-down fa-lg c-mt-4"></i><br>caret-square-o-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-caret-square-o-left fa-lg c-mt-4"></i><br>caret-square-o-left
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-caret-square-o-right fa-lg c-mt-4"></i><br>caret-square-o-right
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-caret-square-o-up fa-lg c-mt-4"></i><br>caret-square-o-up
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-caret-up fa-lg c-mt-4"></i><br>caret-up
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-chevron-circle-down fa-lg c-mt-4"></i><br>chevron-circle-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-chevron-circle-left fa-lg c-mt-4"></i><br>chevron-circle-left
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-chevron-circle-right fa-lg c-mt-4"></i><br>chevron-circle-right
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-chevron-circle-up fa-lg c-mt-4"></i><br>chevron-circle-up
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-chevron-down fa-lg c-mt-4"></i><br>chevron-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-chevron-left fa-lg c-mt-4"></i><br>chevron-left
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-chevron-right fa-lg c-mt-4"></i><br>chevron-right
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-chevron-up fa-lg c-mt-4"></i><br>chevron-up
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-exchange fa-lg c-mt-4"></i><br>exchange
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-o-down fa-lg c-mt-4"></i><br>hand-o-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-o-left fa-lg c-mt-4"></i><br>hand-o-left
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-o-right fa-lg c-mt-4"></i><br>hand-o-right
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hand-o-up fa-lg c-mt-4"></i><br>hand-o-up
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-long-arrow-down fa-lg c-mt-4"></i><br>long-arrow-down
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-long-arrow-left fa-lg c-mt-4"></i><br>long-arrow-left
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-long-arrow-right fa-lg c-mt-4"></i><br>long-arrow-right
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-long-arrow-up fa-lg c-mt-4"></i><br>long-arrow-up
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-toggle-down fa-lg c-mt-4"></i><br>toggle-down <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-toggle-left fa-lg c-mt-4"></i><br>toggle-left <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-toggle-right fa-lg c-mt-4"></i><br>toggle-right <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-toggle-up fa-lg c-mt-4"></i><br>toggle-up <span class="text-muted">(alias)</span>
-          </CCol>
-
-        </CRow>
-      </CCardBody>
-    </CCard>
-
-    <CCard id="video-player">
-      <CCardHeader>Video Player Icons</CCardHeader>
-      <CCardBody>
-        <CRow class="text-center">
-
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-arrows-alt fa-lg c-mt-4"></i><br>arrows-alt
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-backward fa-lg c-mt-4"></i><br>backward
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-compress fa-lg c-mt-4"></i><br>compress
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-eject fa-lg c-mt-4"></i><br>eject
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-expand fa-lg c-mt-4"></i><br>expand
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-fast-backward fa-lg c-mt-4"></i><br>fast-backward
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-fast-forward fa-lg c-mt-4"></i><br>fast-forward
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-forward fa-lg c-mt-4"></i><br>forward
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-pause fa-lg c-mt-4"></i><br>pause
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-pause-circle fa-lg c-mt-4"></i><br>pause-circle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-pause-circle-o fa-lg c-mt-4"></i><br>pause-circle-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-play fa-lg c-mt-4"></i><br>play
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-play-circle fa-lg c-mt-4"></i><br>play-circle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-play-circle-o fa-lg c-mt-4"></i><br>play-circle-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-random fa-lg c-mt-4"></i><br>random
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-step-backward fa-lg c-mt-4"></i><br>step-backward
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-step-forward fa-lg c-mt-4"></i><br>step-forward
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-stop fa-lg c-mt-4"></i><br>stop
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-stop-circle fa-lg c-mt-4"></i><br>stop-circle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-stop-circle-o fa-lg c-mt-4"></i><br>stop-circle-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-youtube-play fa-lg c-mt-4"></i><br>youtube-play
-          </CCol>
-
-        </CRow>
-      </CCardBody>
-    </CCard>
-
-    <CCard id="brand">
-      <CCardHeader>Brand Icons</CCardHeader>
-      <CCardBody>
-        <div class="alert alert-warning">
-          <h4><i class="fa fa-warning"></i> Warning!</h4>
-          Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social
-          Media Buttons" setting. We will not use hacks to force them to display. Please
-          <a href="https://adblockplus.org/en/bugs" class="alert-link">report an issue with Adblock Plus</a> if you believe this to be
-          an error. To work around this, you'll need to modify the social icon class names.
-        </div>
-        <CRow class="text-center">
-
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-500px fa-lg c-mt-4"></i><br>500px
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-adn fa-lg c-mt-4"></i><br>adn
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-amazon fa-lg c-mt-4"></i><br>amazon
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-android fa-lg c-mt-4"></i><br>android
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-angellist fa-lg c-mt-4"></i><br>angellist
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-apple fa-lg c-mt-4"></i><br>apple
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-behance fa-lg c-mt-4"></i><br>behance
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-behance-square fa-lg c-mt-4"></i><br>behance-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bitbucket fa-lg c-mt-4"></i><br>bitbucket
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bitbucket-square fa-lg c-mt-4"></i><br>bitbucket-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bitcoin fa-lg c-mt-4"></i><br>bitcoin <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-black-tie fa-lg c-mt-4"></i><br>black-tie
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bluetooth fa-lg c-mt-4"></i><br>bluetooth
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-bluetooth-b fa-lg c-mt-4"></i><br>bluetooth-b
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-btc fa-lg c-mt-4"></i><br>btc
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-buysellads fa-lg c-mt-4"></i><br>buysellads
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cc-amex fa-lg c-mt-4"></i><br>cc-amex
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cc-diners-club fa-lg c-mt-4"></i><br>cc-diners-club
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cc-discover fa-lg c-mt-4"></i><br>cc-discover
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cc-jcb fa-lg c-mt-4"></i><br>cc-jcb
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cc-mastercard fa-lg c-mt-4"></i><br>cc-mastercard
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cc-paypal fa-lg c-mt-4"></i><br>cc-paypal
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cc-stripe fa-lg c-mt-4"></i><br>cc-stripe
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-cc-visa fa-lg c-mt-4"></i><br>cc-visa
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-chrome fa-lg c-mt-4"></i><br>chrome
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-codepen fa-lg c-mt-4"></i><br>codepen
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-codiepie fa-lg c-mt-4"></i><br>codiepie
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-connectdevelop fa-lg c-mt-4"></i><br>connectdevelop
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-contao fa-lg c-mt-4"></i><br>contao
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-css3 fa-lg c-mt-4"></i><br>css3
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-dashcube fa-lg c-mt-4"></i><br>dashcube
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-delicious fa-lg c-mt-4"></i><br>delicious
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-deviantart fa-lg c-mt-4"></i><br>deviantart
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-digg fa-lg c-mt-4"></i><br>digg
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-dribbble fa-lg c-mt-4"></i><br>dribbble
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-dropbox fa-lg c-mt-4"></i><br>dropbox
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-drupal fa-lg c-mt-4"></i><br>drupal
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-edge fa-lg c-mt-4"></i><br>edge
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-empire fa-lg c-mt-4"></i><br>empire
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-expeditedssl fa-lg c-mt-4"></i><br>expeditedssl
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-facebook fa-lg c-mt-4"></i><br>facebook
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-facebook-f fa-lg c-mt-4"></i><br>facebook-f <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-facebook-official fa-lg c-mt-4"></i><br>facebook-official
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-facebook-square fa-lg c-mt-4"></i><br>facebook-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-firefox fa-lg c-mt-4"></i><br>firefox
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-flickr fa-lg c-mt-4"></i><br>flickr
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-fonticons fa-lg c-mt-4"></i><br>fonticons
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-fort-awesome fa-lg c-mt-4"></i><br>fort-awesome
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-forumbee fa-lg c-mt-4"></i><br>forumbee
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-foursquare fa-lg c-mt-4"></i><br>foursquare
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-ge fa-lg c-mt-4"></i><br>ge <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-get-pocket fa-lg c-mt-4"></i><br>get-pocket
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-gg fa-lg c-mt-4"></i><br>gg
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-gg-circle fa-lg c-mt-4"></i><br>gg-circle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-git fa-lg c-mt-4"></i><br>git
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-git-square fa-lg c-mt-4"></i><br>git-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-github fa-lg c-mt-4"></i><br>github
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-github-alt fa-lg c-mt-4"></i><br>github-alt
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-github-square fa-lg c-mt-4"></i><br>github-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-gittip fa-lg c-mt-4"></i><br>gittip <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-google fa-lg c-mt-4"></i><br>google
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-google-plus fa-lg c-mt-4"></i><br>google-plus
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-google-plus-square fa-lg c-mt-4"></i><br>google-plus-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-google-wallet fa-lg c-mt-4"></i><br>google-wallet
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-gratipay fa-lg c-mt-4"></i><br>gratipay
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hacker-news fa-lg c-mt-4"></i><br>hacker-news
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-houzz fa-lg c-mt-4"></i><br>houzz
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-html5 fa-lg c-mt-4"></i><br>html5
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-instagram fa-lg c-mt-4"></i><br>instagram
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-internet-explorer fa-lg c-mt-4"></i><br>internet-explorer
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-ioxhost fa-lg c-mt-4"></i><br>ioxhost
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-joomla fa-lg c-mt-4"></i><br>joomla
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-jsfiddle fa-lg c-mt-4"></i><br>jsfiddle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-lastfm fa-lg c-mt-4"></i><br>lastfm
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-lastfm-square fa-lg c-mt-4"></i><br>lastfm-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-leanpub fa-lg c-mt-4"></i><br>leanpub
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-linkedin fa-lg c-mt-4"></i><br>linkedin
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-linkedin-square fa-lg c-mt-4"></i><br>linkedin-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-linux fa-lg c-mt-4"></i><br>linux
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-maxcdn fa-lg c-mt-4"></i><br>maxcdn
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-meanpath fa-lg c-mt-4"></i><br>meanpath
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-medium fa-lg c-mt-4"></i><br>medium
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-mixcloud fa-lg c-mt-4"></i><br>mixcloud
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-modx fa-lg c-mt-4"></i><br>modx
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-odnoklassniki fa-lg c-mt-4"></i><br>odnoklassniki
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-odnoklassniki-square fa-lg c-mt-4"></i><br>odnoklassniki-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-opencart fa-lg c-mt-4"></i><br>opencart
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-openid fa-lg c-mt-4"></i><br>openid
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-opera fa-lg c-mt-4"></i><br>opera
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-optin-monster fa-lg c-mt-4"></i><br>optin-monster
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-pagelines fa-lg c-mt-4"></i><br>pagelines
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-paypal fa-lg c-mt-4"></i><br>paypal
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-pied-piper fa-lg c-mt-4"></i><br>pied-piper
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-pied-piper-alt fa-lg c-mt-4"></i><br>pied-piper-alt
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-pinterest fa-lg c-mt-4"></i><br>pinterest
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-pinterest-p fa-lg c-mt-4"></i><br>pinterest-p
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-pinterest-square fa-lg c-mt-4"></i><br>pinterest-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-product-hunt fa-lg c-mt-4"></i><br>product-hunt
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-qq fa-lg c-mt-4"></i><br>qq
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-ra fa-lg c-mt-4"></i><br>ra <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-rebel fa-lg c-mt-4"></i><br>rebel
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-reddit fa-lg c-mt-4"></i><br>reddit
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-reddit-alien fa-lg c-mt-4"></i><br>reddit-alien
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-reddit-square fa-lg c-mt-4"></i><br>reddit-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-renren fa-lg c-mt-4"></i><br>renren
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-safari fa-lg c-mt-4"></i><br>safari
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-scribd fa-lg c-mt-4"></i><br>scribd
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-sellsy fa-lg c-mt-4"></i><br>sellsy
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-share-alt fa-lg c-mt-4"></i><br>share-alt
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-share-alt-square fa-lg c-mt-4"></i><br>share-alt-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-shirtsinbulk fa-lg c-mt-4"></i><br>shirtsinbulk
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-simplybuilt fa-lg c-mt-4"></i><br>simplybuilt
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-skyatlas fa-lg c-mt-4"></i><br>skyatlas
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-skype fa-lg c-mt-4"></i><br>skype
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-slack fa-lg c-mt-4"></i><br>slack
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-slideshare fa-lg c-mt-4"></i><br>slideshare
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-soundcloud fa-lg c-mt-4"></i><br>soundcloud
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-spotify fa-lg c-mt-4"></i><br>spotify
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-stack-exchange fa-lg c-mt-4"></i><br>stack-exchange
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-stack-overflow fa-lg c-mt-4"></i><br>stack-overflow
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-steam fa-lg c-mt-4"></i><br>steam
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-steam-square fa-lg c-mt-4"></i><br>steam-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-stumbleupon fa-lg c-mt-4"></i><br>stumbleupon
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-stumbleupon-circle fa-lg c-mt-4"></i><br>stumbleupon-circle
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-tencent-weibo fa-lg c-mt-4"></i><br>tencent-weibo
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-trello fa-lg c-mt-4"></i><br>trello
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-tripadvisor fa-lg c-mt-4"></i><br>tripadvisor
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-tumblr fa-lg c-mt-4"></i><br>tumblr
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-tumblr-square fa-lg c-mt-4"></i><br>tumblr-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-twitch fa-lg c-mt-4"></i><br>twitch
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-twitter fa-lg c-mt-4"></i><br>twitter
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-twitter-square fa-lg c-mt-4"></i><br>twitter-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-usb fa-lg c-mt-4"></i><br>usb
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-viacoin fa-lg c-mt-4"></i><br>viacoin
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-vimeo fa-lg c-mt-4"></i><br>vimeo
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-vimeo-square fa-lg c-mt-4"></i><br>vimeo-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-vine fa-lg c-mt-4"></i><br>vine
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-vk fa-lg c-mt-4"></i><br>vk
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-wechat fa-lg c-mt-4"></i><br>wechat <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-weibo fa-lg c-mt-4"></i><br>weibo
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-weixin fa-lg c-mt-4"></i><br>weixin
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-whatsapp fa-lg c-mt-4"></i><br>whatsapp
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-wikipedia-w fa-lg c-mt-4"></i><br>wikipedia-w
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-windows fa-lg c-mt-4"></i><br>windows
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-wordpress fa-lg c-mt-4"></i><br>wordpress
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-xing fa-lg c-mt-4"></i><br>xing
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-xing-square fa-lg c-mt-4"></i><br>xing-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-y-combinator fa-lg c-mt-4"></i><br>y-combinator
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-y-combinator-square fa-lg c-mt-4"></i><br>y-combinator-square <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-yahoo fa-lg c-mt-4"></i><br>yahoo
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-yc fa-lg c-mt-4"></i><br>yc <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-yc-square fa-lg c-mt-4"></i><br>yc-square <span class="text-muted">(alias)</span>
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-yelp fa-lg c-mt-4"></i><br>yelp
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-youtube fa-lg c-mt-4"></i><br>youtube
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-youtube-play fa-lg c-mt-4"></i><br>youtube-play
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-youtube-square fa-lg c-mt-4"></i><br>youtube-square
-          </CCol>
-        </CRow>
-        <div class="alert alert-success c-mt-4">
-          <ul class="margin-bottom-none padding-left-lg">
-            <li>All brand icons are trademarks of their respective owners.</li>
-            <li>The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.</li>
-            <li>Brand icons should only be used to represent the company or product to which they refer.</li>
-          </ul>
-        </div>
-      </CCardBody>
-    </CCard>
-
-    <CCard id="medical">
-      <CCardHeader>Medical Icons</CCardHeader>
-      <CCardBody>
-        <CRow class="text-center">
-
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-ambulance fa-lg c-mt-4"></i><br>ambulance
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-h-square fa-lg c-mt-4"></i><br>h-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-heart fa-lg c-mt-4"></i><br>heart
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-heart-o fa-lg c-mt-4"></i><br>heart-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-heartbeat fa-lg c-mt-4"></i><br>heartbeat
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-hospital-o fa-lg c-mt-4"></i><br>hospital-o
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-medkit fa-lg c-mt-4"></i><br>medkit
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-plus-square fa-lg c-mt-4"></i><br>plus-square
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-stethoscope fa-lg c-mt-4"></i><br>stethoscope
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-user-md fa-lg c-mt-4"></i><br>user-md
-          </CCol>
-          <CCol col="6" sm="4" md="3" lg="2">
-            <i class="fa fa-wheelchair fa-lg c-mt-4"></i><br>wheelchair
-          </CCol>
-
-        </CRow>
-      </CCardBody>
-    </CCard>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'font-awesome'
-}
-</script>
diff --git a/src/views/icons/SimpleLineIcons.vue b/src/views/icons/SimpleLineIcons.vue
deleted file mode 100644
index 23ab452d..00000000
--- a/src/views/icons/SimpleLineIcons.vue
+++ /dev/null
@@ -1,751 +0,0 @@
-<template>
-  <div class="c-animated c-fadeIn">
-    <CCard class="c-card-default">
-      <CCardHeader>
-        <i class="fa fa-picture-o"></i> Simple Line Icons
-      </CCardHeader>
-      <CCardBody>
-        <CRow class="c-text-center">
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-user icons c-font-2xl c-d-block c-mt-4"></i>icon-user
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-people icons c-font-2xl c-d-block c-mt-4"></i>icon-people
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-user-female icons c-font-2xl c-d-block c-mt-4"></i>icon-user-female
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-user-follow icons c-font-2xl c-d-block c-mt-4"></i>icon-user-follow
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-user-following icons c-font-2xl c-d-block c-mt-4"></i>icon-user-following
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-user-unfollow icons c-font-2xl c-d-block c-mt-4"></i>icon-user-unfollow
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-login icons c-font-2xl c-d-block c-mt-4"></i>icon-login
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-logout icons c-font-2xl c-d-block c-mt-4"></i>icon-logout
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-emotsmile icons c-font-2xl c-d-block c-mt-4"></i>icon-emotsmile
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-phone icons c-font-2xl c-d-block c-mt-4"></i>icon-phone
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-call-end icons c-font-2xl c-d-block c-mt-4"></i>icon-call-end
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-call-in icons c-font-2xl c-d-block c-mt-4"></i>icon-call-in
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-call-out icons c-font-2xl c-d-block c-mt-4"></i>icon-call-out
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-map icons c-font-2xl c-d-block c-mt-4"></i>icon-map
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-location-pin icons c-font-2xl c-d-block c-mt-4"></i>icon-location-pin
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-direction icons c-font-2xl c-d-block c-mt-4"></i>icon-direction
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-directions icons c-font-2xl c-d-block c-mt-4"></i>icon-directions
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-compass icons c-font-2xl c-d-block c-mt-4"></i>icon-compass
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-layers icons c-font-2xl c-d-block c-mt-4"></i>icon-layers
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-menu icons c-font-2xl c-d-block c-mt-4"></i>icon-menu
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-list icons c-font-2xl c-d-block c-mt-4"></i>icon-list
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-options-vertical icons c-font-2xl c-d-block c-mt-4"></i>icon-options-vertical
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-options icons c-font-2xl c-d-block c-mt-4"></i>icon-options
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-arrow-down icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-down
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-arrow-left icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-left
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-arrow-right icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-right
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-arrow-up icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-up
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-arrow-up-circle icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-up-circle
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-arrow-left-circle icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-left-circle
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-arrow-right-circle icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-right-circle
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-arrow-down-circle icons c-font-2xl c-d-block c-mt-4"></i>icon-arrow-down-circle
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-check icons c-font-2xl c-d-block c-mt-4"></i>icon-check
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-clock icons c-font-2xl c-d-block c-mt-4"></i>icon-clock
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-plus icons c-font-2xl c-d-block c-mt-4"></i>icon-plus
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-close icons c-font-2xl c-d-block c-mt-4"></i>icon-close
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-trophy icons c-font-2xl c-d-block c-mt-4"></i>icon-trophy
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-screen-smartphone icons c-font-2xl c-d-block c-mt-4"></i>icon-screen-smartphone
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-screen-desktop icons c-font-2xl c-d-block c-mt-4"></i>icon-screen-desktop
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-plane icons c-font-2xl c-d-block c-mt-4"></i>icon-plane
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-notebook icons c-font-2xl c-d-block c-mt-4"></i>icon-notebook
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-mustache icons c-font-2xl c-d-block c-mt-4"></i>icon-mustache
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-mouse icons c-font-2xl c-d-block c-mt-4"></i>icon-mouse
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-magnet icons c-font-2xl c-d-block c-mt-4"></i>icon-magnet
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-energy icons c-font-2xl c-d-block c-mt-4"></i>icon-energy
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-disc icons c-font-2xl c-d-block c-mt-4"></i>icon-disc
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-cursor icons c-font-2xl c-d-block c-mt-4"></i>icon-cursor
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-cursor-move icons c-font-2xl c-d-block c-mt-4"></i>icon-cursor-move
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-crop icons c-font-2xl c-d-block c-mt-4"></i>icon-crop
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-chemistry icons c-font-2xl c-d-block c-mt-4"></i>icon-chemistry
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-speedometer icons c-font-2xl c-d-block c-mt-4"></i>icon-speedometer
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-shield icons c-font-2xl c-d-block c-mt-4"></i>icon-shield
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-screen-tablet icons c-font-2xl c-d-block c-mt-4"></i>icon-screen-tablet
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-magic-wand icons c-font-2xl c-d-block c-mt-4"></i>icon-magic-wand
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-hourglass icons c-font-2xl c-d-block c-mt-4"></i>icon-hourglass
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-graduation icons c-font-2xl c-d-block c-mt-4"></i>icon-graduation
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-ghost icons c-font-2xl c-d-block c-mt-4"></i>icon-ghost
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-game-controller icons c-font-2xl c-d-block c-mt-4"></i>icon-game-controller
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-fire icons c-font-2xl c-d-block c-mt-4"></i>icon-fire
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-eyeglass icons c-font-2xl c-d-block c-mt-4"></i>icon-eyeglass
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-envelope-open icons c-font-2xl c-d-block c-mt-4"></i>icon-envelope-open
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-envelope-letter icons c-font-2xl c-d-block c-mt-4"></i>icon-envelope-letter
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-bell icons c-font-2xl c-d-block c-mt-4"></i>icon-bell
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-badge icons c-font-2xl c-d-block c-mt-4"></i>icon-badge
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-anchor icons c-font-2xl c-d-block c-mt-4"></i>icon-anchor
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-wallet icons c-font-2xl c-d-block c-mt-4"></i>icon-wallet
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-vector icons c-font-2xl c-d-block c-mt-4"></i>icon-vector
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-speech icons c-font-2xl c-d-block c-mt-4"></i>icon-speech
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-puzzle icons c-font-2xl c-d-block c-mt-4"></i>icon-puzzle
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-printer icons c-font-2xl c-d-block c-mt-4"></i>icon-printer
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-present icons c-font-2xl c-d-block c-mt-4"></i>icon-present
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-playlist icons c-font-2xl c-d-block c-mt-4"></i>icon-playlist
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-pin icons c-font-2xl c-d-block c-mt-4"></i>icon-pin
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-picture icons c-font-2xl c-d-block c-mt-4"></i>icon-picture
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-handbag icons c-font-2xl c-d-block c-mt-4"></i>icon-handbag
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-globe-alt icons c-font-2xl c-d-block c-mt-4"></i>icon-globe-alt
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-globe icons c-font-2xl c-d-block c-mt-4"></i>icon-globe
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-folder-alt icons c-font-2xl c-d-block c-mt-4"></i>icon-folder-alt
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-folder icons c-font-2xl c-d-block c-mt-4"></i>icon-folder
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-film icons c-font-2xl c-d-block c-mt-4"></i>icon-film
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-feed icons c-font-2xl c-d-block c-mt-4"></i>icon-feed
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-drop icons c-font-2xl c-d-block c-mt-4"></i>icon-drop
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-drawer icons c-font-2xl c-d-block c-mt-4"></i>icon-drawer
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-docs icons c-font-2xl c-d-block c-mt-4"></i>icon-docs
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-doc icons c-font-2xl c-d-block c-mt-4"></i>icon-doc
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-diamond icons c-font-2xl c-d-block c-mt-4"></i>icon-diamond
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-cup icons c-font-2xl c-d-block c-mt-4"></i>icon-cup
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-calculator icons c-font-2xl c-d-block c-mt-4"></i>icon-calculator
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-bubbles icons c-font-2xl c-d-block c-mt-4"></i>icon-bubbles
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-briefcase icons c-font-2xl c-d-block c-mt-4"></i>icon-briefcase
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-book-open icons c-font-2xl c-d-block c-mt-4"></i>icon-book-open
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-basket-loaded icons c-font-2xl c-d-block c-mt-4"></i>icon-basket-loaded
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-basket icons c-font-2xl c-d-block c-mt-4"></i>icon-basket
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-bag icons c-font-2xl c-d-block c-mt-4"></i>icon-bag
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-action-undo icons c-font-2xl c-d-block c-mt-4"></i>icon-action-undo
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-action-redo icons c-font-2xl c-d-block c-mt-4"></i>icon-action-redo
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-wrench icons c-font-2xl c-d-block c-mt-4"></i>icon-wrench
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-umbrella icons c-font-2xl c-d-block c-mt-4"></i>icon-umbrella
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-trash icons c-font-2xl c-d-block c-mt-4"></i>icon-trash
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-tag icons c-font-2xl c-d-block c-mt-4"></i>icon-tag
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-support icons c-font-2xl c-d-block c-mt-4"></i>icon-support
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-frame icons c-font-2xl c-d-block c-mt-4"></i>icon-frame
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-size-fullscreen icons c-font-2xl c-d-block c-mt-4"></i>icon-size-fullscreen
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-size-actual icons c-font-2xl c-d-block c-mt-4"></i>icon-size-actual
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-shuffle icons c-font-2xl c-d-block c-mt-4"></i>icon-shuffle
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-share-alt icons c-font-2xl c-d-block c-mt-4"></i>icon-share-alt
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-share icons c-font-2xl c-d-block c-mt-4"></i>icon-share
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-rocket icons c-font-2xl c-d-block c-mt-4"></i>icon-rocket
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-question icons c-font-2xl c-d-block c-mt-4"></i>icon-question
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-pie-chart icons c-font-2xl c-d-block c-mt-4"></i>icon-pie-chart
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-pencil icons c-font-2xl c-d-block c-mt-4"></i>icon-pencil
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-note icons c-font-2xl c-d-block c-mt-4"></i>icon-note
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-loop icons c-font-2xl c-d-block c-mt-4"></i>icon-loop
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-home icons c-font-2xl c-d-block c-mt-4"></i>icon-home
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-grid icons c-font-2xl c-d-block c-mt-4"></i>icon-grid
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-graph icons c-font-2xl c-d-block c-mt-4"></i>icon-graph
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-microphone icons c-font-2xl c-d-block c-mt-4"></i>icon-microphone
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-music-tone-alt icons c-font-2xl c-d-block c-mt-4"></i>icon-music-tone-alt
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-music-tone icons c-font-2xl c-d-block c-mt-4"></i>icon-music-tone
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-earphones-alt icons c-font-2xl c-d-block c-mt-4"></i>icon-earphones-alt
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-earphones icons c-font-2xl c-d-block c-mt-4"></i>icon-earphones
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-equalizer icons c-font-2xl c-d-block c-mt-4"></i>icon-equalizer
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-like icons c-font-2xl c-d-block c-mt-4"></i>icon-like
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-dislike icons c-font-2xl c-d-block c-mt-4"></i>icon-dislike
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-control-start icons c-font-2xl c-d-block c-mt-4"></i>icon-control-start
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-control-rewind icons c-font-2xl c-d-block c-mt-4"></i>icon-control-rewind
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-control-play icons c-font-2xl c-d-block c-mt-4"></i>icon-control-play
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-control-pause icons c-font-2xl c-d-block c-mt-4"></i>icon-control-pause
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-control-forward icons c-font-2xl c-d-block c-mt-4"></i>icon-control-forward
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-control-end icons c-font-2xl c-d-block c-mt-4"></i>icon-control-end
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-volume-1 icons c-font-2xl c-d-block c-mt-4"></i>icon-volume-1
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-volume-2 icons c-font-2xl c-d-block c-mt-4"></i>icon-volume-2
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-volume-off icons c-font-2xl c-d-block c-mt-4"></i>icon-volume-off
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-calendar icons c-font-2xl c-d-block c-mt-4"></i>icon-calendar
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-bulb icons c-font-2xl c-d-block c-mt-4"></i>icon-bulb
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-chart icons c-font-2xl c-d-block c-mt-4"></i>icon-chart
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-ban icons c-font-2xl c-d-block c-mt-4"></i>icon-ban
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-bubble icons c-font-2xl c-d-block c-mt-4"></i>icon-bubble
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-camrecorder icons c-font-2xl c-d-block c-mt-4"></i>icon-camrecorder
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-camera icons c-font-2xl c-d-block c-mt-4"></i>icon-camera
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-cloud-download icons c-font-2xl c-d-block c-mt-4"></i>icon-cloud-download
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-cloud-upload icons c-font-2xl c-d-block c-mt-4"></i>icon-cloud-upload
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-envelope icons c-font-2xl c-d-block c-mt-4"></i>icon-envelope
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-eye icons c-font-2xl c-d-block c-mt-4"></i>icon-eye
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-flag icons c-font-2xl c-d-block c-mt-4"></i>icon-flag
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-heart icons c-font-2xl c-d-block c-mt-4"></i>icon-heart
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-info icons c-font-2xl c-d-block c-mt-4"></i>icon-info
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-key icons c-font-2xl c-d-block c-mt-4"></i>icon-key
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-link icons c-font-2xl c-d-block c-mt-4"></i>icon-link
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-lock icons c-font-2xl c-d-block c-mt-4"></i>icon-lock
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-lock-open icons c-font-2xl c-d-block c-mt-4"></i>icon-lock-open
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-magnifier icons c-font-2xl c-d-block c-mt-4"></i>icon-magnifier
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-magnifier-add icons c-font-2xl c-d-block c-mt-4"></i>icon-magnifier-add
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-magnifier-remove icons c-font-2xl c-d-block c-mt-4"></i>icon-magnifier-remove
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-paper-clip icons c-font-2xl c-d-block c-mt-4"></i>icon-paper-clip
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-paper-plane icons c-font-2xl c-d-block c-mt-4"></i>icon-paper-plane
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-power icons c-font-2xl c-d-block c-mt-4"></i>icon-power
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-refresh icons c-font-2xl c-d-block c-mt-4"></i>icon-refresh
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-reload icons c-font-2xl c-d-block c-mt-4"></i>icon-reload
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-settings icons c-font-2xl c-d-block c-mt-4"></i>icon-settings
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-star icons c-font-2xl c-d-block c-mt-4"></i>icon-star
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-symbol-female icons c-font-2xl c-d-block c-mt-4"></i>icon-symbol-female
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-symbol-male icons c-font-2xl c-d-block c-mt-4"></i>icon-symbol-male
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-target icons c-font-2xl c-d-block c-mt-4"></i>icon-target
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-credit-card icons c-font-2xl c-d-block c-mt-4"></i>icon-credit-card
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-paypal icons c-font-2xl c-d-block c-mt-4"></i>icon-paypal
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-tumblr icons c-font-2xl c-d-block c-mt-4"></i>icon-social-tumblr
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-twitter icons c-font-2xl c-d-block c-mt-4"></i>icon-social-twitter
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-facebook icons c-font-2xl c-d-block c-mt-4"></i>icon-social-facebook
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-instagram icons c-font-2xl c-d-block c-mt-4"></i>icon-social-instagram
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-linkedin icons c-font-2xl c-d-block c-mt-4"></i>icon-social-linkedin
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-pinterest icons c-font-2xl c-d-block c-mt-4"></i>icon-social-pinterest
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-github icons c-font-2xl c-d-block c-mt-4"></i>icon-social-github
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-gplus icons c-font-2xl c-d-block c-mt-4"></i>icon-social-gplus
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-reddit icons c-font-2xl c-d-block c-mt-4"></i>icon-social-reddit
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-skype icons c-font-2xl c-d-block c-mt-4"></i>icon-social-skype
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-dribbble icons c-font-2xl c-d-block c-mt-4"></i>icon-social-dribbble
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-behance icons c-font-2xl c-d-block c-mt-4"></i>icon-social-behance
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-foursqare icons c-font-2xl c-d-block c-mt-4"></i>icon-social-foursqare
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-soundcloud icons c-font-2xl c-d-block c-mt-4"></i>icon-social-soundcloud
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-spotify icons c-font-2xl c-d-block c-mt-4"></i>icon-social-spotify
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-stumbleupon icons c-font-2xl c-d-block c-mt-4"></i>icon-social-stumbleupon
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-youtube icons c-font-2xl c-d-block c-mt-4"></i>icon-social-youtube
-          </CCol>
-
-          <CCol col="6" sm="4" md="3">
-            <i class="icon-social-dropbox icons c-font-2xl c-d-block c-mt-4"></i>icon-social-dropbox
-          </CCol>
-        </CRow>
-      </CCardBody>
-    </CCard>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'simple-line-icons'
-}
-</script>