Website Under Construction

Table of Contents

Interface Platform Technology Social

Interface Platform Social

Sass (SCSS) Template

Font Icon

Below are svg icons that are automatically compiled into fonts for use as text using Gulp.

Demonstration

Interface

external

Platform

Android
#A4C639

Apple
#A2AAAD

GitHub
#FFFFFF

Linux
#FFCC33

Meta
#0081FB

OpenAI
#10A37F

PlayStation
#9299A9

Steam
#00ADEE

Windows
#00A4EF

Xbox
#107C10

Technology

Blender
#EA7600

Brave
#FB542B

C++
#00599C

C#
#9B4993

CSS
#264de4

Docker
#1D63ED

.NET
#512BD4

Edge
#3277BC

Firefox
#E66000

Git
#F1502F

Gitea
#609926

Godot
#478CBF

Gulp
#DB4446

HTML5
#E34C26

Java
#5382A1

JavaScript
#F0DB4F

Node.js
#80BD01

NPM
#CC3534

Opera
#FF1B2D

Pulsar
#642B90

Python
#4B8BBE

SASS
#CD669A

Unity
#CCCCCC

Unreal Engine
#FFFFFF

Visual Studio
#865FC5

Visual Studio Code
#0078d7

Facebook
#3B5998

Instagram
#E4405F

LinkedIn
#0077B5

X
#FFFFFF

YouTube
#FF0000

About

These SVG icons are automatically grouped into fonts based on the subdirectories that they are stored in. CSS is also separated by group for minimal data transferred to the client.

Implementation

HTML

<section>
    <h1>Font Icon</h1>
  
    <p>Below are svg icons that are automatically compiled, using gulp, into fonts for use alongside text.</p>
  
    <h2>Showcase</h2>
  
    <h3>Interface</h3>
  
    <div class="row row--dark row--font--lg">
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"><div><p><span class="icon-interface-external"></span><br>external</p></div></div>
    </div>
  
    <h3>Platform</h3>
  
    <div class="row row--dark row--font--lg">
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"><div><p><span class="icon-platform-android"></span><br>android</p></div></div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"><div><p><span class="icon-platform-apple"></span><br>apple</p></div></div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"><div><p><span class="icon-platform-meta"></span><br>meta</p></div></div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"><div><p><span class="icon-platform-playstation"></span><br>playstation</p></div></div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"><div><p><span class="icon-platform-steam"></span><br>steam</p></div></div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"><div><p><span class="icon-platform-xbox"></span><br>xbox</p></div></div>
    </div>
  
    <h3>Social</h3>
  
    <div class="row row--dark row--font--lg">
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"><div><p><span class="icon-social-facebook"></span><br>facebook</p></div></div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"><div><p><span class="icon-social-twitter"></span><br>twitter</p></div></div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"><div><p><span class="icon-social-youtube"></span><br>youtube</p></div></div>
    </div>
  </section>

CSS Compiled

Interface

@font-face {
    font-family: 'font_icon_interface';
    src: url('/font_icon/interface/font_icon_interface.eot'); /* IE9 Compat Modes */
    src: url('/font_icon/interface/font_icon_interface.eot?#iefix') format('embedded-opentype'),
         local('☺'), /* css hack to divert IE6-8 from downloading fonts it can't use */
         url('/font_icon/interface/font_icon_interface.woff2') format('woff2'), /* Super Modern Browsers */
         url('/font_icon/interface/font_icon_interface.woff') format('woff'), /* Pretty Modern Browsers */
         url('/font_icon/interface/font_icon_interface.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/font_icon/interface/font_icon_interface.svg#font_icon_interface') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

[class^="icon-interface-"], [class*=" icon-interface-"] {
    /* Use before or content CSS to define icons */
    font-family: 'font_icon_interface';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    &:before {
        font-size: 0.75em;
    }
}

.icon-interface-external:before {
    content: "\E001";
}

Platform

@font-face {
    font-family: 'font_icon_platform';
    src: url('/font_icon/platform/font_icon_platform.eot'); /* IE9 Compat Modes */
    src: url('/font_icon/platform/font_icon_platform.eot?#iefix') format('embedded-opentype'),
         local('☺'), /* css hack to divert IE6-8 from downloading fonts it can't use */
         url('/font_icon/platform/font_icon_platform.woff2') format('woff2'), /* Super Modern Browsers */
         url('/font_icon/platform/font_icon_platform.woff') format('woff'), /* Pretty Modern Browsers */
         url('/font_icon/platform/font_icon_platform.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/font_icon/platform/font_icon_platform.svg#font_icon_platform') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

[class^="icon-platform-"], [class*=" icon-platform-"] {
    /* Use before or content CSS to define icons */
    font-family: 'font_icon_platform';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    &:before {
        font-size: 0.75em;
    }
}

.icon-platform-android:before {
    content: "\E001";
}

.icon-platform-apple:before {
    content: "\E002";
}

.icon-platform-meta:before {
    content: "\E003";
}

.icon-platform-playstation:before {
    content: "\E004";
}

.icon-platform-steam:before {
    content: "\E005";
}

.icon-platform-xbox:before {
    content: "\E006";
}

@font-face {
    font-family: 'font_icon_social';
    src: url('/font_icon/social/font_icon_social.eot'); /* IE9 Compat Modes */
    src: url('/font_icon/social/font_icon_social.eot?#iefix') format('embedded-opentype'),
         local('☺'), /* css hack to divert IE6-8 from downloading fonts it can't use */
         url('/font_icon/social/font_icon_social.woff2') format('woff2'), /* Super Modern Browsers */
         url('/font_icon/social/font_icon_social.woff') format('woff'), /* Pretty Modern Browsers */
         url('/font_icon/social/font_icon_social.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/font_icon/social/font_icon_social.svg#font_icon_social') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

[class^="icon-social-"], [class*=" icon-social-"] {
    /* Use before or content CSS to define icons */
    font-family: 'font_icon_social';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    &:before {
        font-size: 0.75em;
    }
}

.icon-social-facebook:before {
    content: "\E001";
}

.icon-social-twitter:before {
    content: "\E002";
}

.icon-social-youtube:before {
    content: "\E003";
}

Sass (SCSS) Template

<%
  var pathParts = fontPath.split('/'); // Split the fontPath by '/'
  var subDir = pathParts[pathParts.length - 2]; // Get the second last part, which is 'subdir'
  %>@font-face {
      font-family: '<%= fontName %>';
      src: url('<%= fontPath %><%= fontName %>.eot'); /* IE9 Compat Modes */
      src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('embedded-opentype'),
           local('☺'), /* css hack to divert IE6-8 from downloading fonts it can't use */
           url('<%= fontPath %><%= fontName %>.woff2') format('woff2'), /* Super Modern Browsers */
           url('<%= fontPath %><%= fontName %>.woff') format('woff'), /* Pretty Modern Browsers */
           url('<%= fontPath %><%= fontName %>.ttf') format('truetype'), /* Safari, Android, iOS */
           url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg'); /* Legacy iOS */
      font-weight: normal;
      font-style: normal;
  }
  
  [class^="icon-<%= subDir %>-"], [class*=" icon-<%= subDir %>-"] {
      /* Use before or content CSS to define icons */
      font-family: '<%= fontName %>';
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
  
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  
      &:before {
          font-size: 0.75em;
      }
  }
  <% console.log(glyphs); %><% glyphs.forEach(function(glyph) { %>
  .icon-<%= glyph.fileName %>:before {
      content: "\<%= glyph.codePoint %>";
  }
  <% }); %>

Special Thanks

This page is comprised of partially or heavily modified elements from the following source(s):

Source: https://www.svgrepo.com/