Font Icon

This page is a developer reference for the icon-font pipeline used by this example project. SVG files are grouped by folder, compiled into font files by set, and emitted as matching CSS class namespaces (for example: ).

The page-specific font-icon stylesheets are discovered at compile time from the project input directories, while the icon grids themselves are generated at runtime from compiled CSS selectors. That keeps the page aligned with what is actually built and loaded instead of relying on a manually maintained set list.

Palettes

These static cards show how a single icon renders across the palette variants generated by the font-icon CSS template: primary/alternate text color, with and without background color helpers.

Other Examples

The sections below are auto-rendered from loaded class names for the detected sets (). Labels intentionally show the exact CSS class names so developers can copy/paste them directly.

The palette mode selector applies/removes the generated font-icon--color--* utility classes on each tile to preview production styling behavior without editing markup.

Implementation Example

Use these snippets as a baseline for integration. In practice, reference the class names from the generated grid above and apply optional palette utility classes only when needed.

HTML

Icon Only

<div class="font-icon--container"><p><span class="font-icon--interface--arrow-down"></span><br>arrow_down</p></div>

With Color

<div class="font-icon--container font-icon--color--browser--brave--background"><p><span class="font-icon--browser--brave"></span><br><span>Brave</span></p></div>

CSS Compiled

@font-face {
  font-family: "font-icon-interface";
  src: url("/asset/font-icon/interface/font-icon-interface.eot");
  src: url("/asset/font-icon/interface/font-icon-interface.eot?#iefix") format("embedded-opentype"), local("☺"), url("/asset/font-icon/interface/font-icon-interface.woff2") format("woff2"), url("/asset/font-icon/interface/font-icon-interface.woff") format("woff"), url("/asset/font-icon/interface/font-icon-interface.ttf") format("truetype"), url("/asset/font-icon/interface/font-icon-interface.svg#font-icon-interface") format("svg");
  font-weight: normal;
  font-style: normal
}

[class^=font-icon--interface--],
[class*=" font-icon--interface--"] {
  font-family: "font-icon-interface"
}

.font-icon--interface--arrow-down:before {
  content: "\E001"
}

.font-icon--interface--arrow-fill-down:before {
  content: "\E002"
}

.font-icon--interface--arrow-fill-down-circle:before {
  content: "\E003"
}

.font-icon--interface--download:before {
  content: "\E004"
}

.font-icon--interface--external:before {
  content: "\E005"
}

.font-icon--interface--home:before {
  content: "\E006"
}

.font-icon--interface--link:before {
  content: "\E007"
}

.font-icon--interface--menu:before {
  content: "\E008"
}

/* Built with Synticore Website Compiler 1.1.0 */

Sass (SCSS) Template

Learn more about the font icon template pipeline and override behavior in the Synticore Wiki: Font Icon Template section .

<%
var pathParts = fontPath.split('/'); // Split the fontPath by '/'
var subDir = pathParts[pathParts.length - 2]; // Get the second last part, which is 'subdir'
function isHexColor(color) { // Function to check if a string is a valid hex color code
    return /^([0-9A-F]{6})$/i.test(color);
}
function getAutoGenColor(hexColor) { // Function to check brightness of hex color and return appropriate text color
    hexColor = hexColor.replace('#', '');
    var r = parseInt(hexColor.substring(0, 2), 16);
    var g = parseInt(hexColor.substring(2, 4), 16);
    var b = parseInt(hexColor.substring(4, 6), 16);
    var brightness = (r * 299 + g * 587 + b * 114) / 1000;
    return brightness > 128 ? '#000000' : '#ffffff';
    // return brightness > 167 ? '#000000' : '#ffffff';
}

%>@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^="font-icon--<%= subDir %>--"], [class*=" font-icon--<%= subDir %>--"] {
    font-family: '<%= fontName %>';
}
<% console.log(glyphs); %><% glyphs.forEach(function(glyph) {
    var fileName = glyph.fileName;
    var fileColor = null;
    var fileColorAuto = null;
    var hexColorMatch = fileName.match(/-(\w{6})$/);
    if (hexColorMatch && isHexColor(hexColorMatch[1])) {
        fileColor = `#${hexColorMatch[1]}`;
        fileName = fileName.replace(/-(\w{6})$/, '');
        fileColorAuto = getAutoGenColor(fileColor);
    }%>
.font-icon--<%= subDir %>--<%= fileName %>:before {
    content: "\<%= glyph.codePoint %>";
}
<% if (fileColor) { %>
.font-icon--color--<%= subDir %>--<%= fileName %> {
    color: <%= fileColor %> !important;
}
.font-icon--color--<%= subDir %>--<%= fileName %>--alt {
    color: <%= fileColorAuto %> !important;
}
.font-icon--color--<%= subDir %>--<%= fileName %>--background {
    color: <%= fileColorAuto %> !important;
    background-color: <%= fileColor %> !important;
}
.font-icon--color--<%= subDir %>--<%= fileName %>--background--alt {
    color: <%= fileColor %> !important;
    background-color: <%= fileColorAuto %> !important;
}
.font-icon--color--<%= subDir %>--<%= fileName %>--background--accent {
    color: <%= fileColorAuto %> !important;
    background-color: <%= fileColor %>7f !important;
}
.font-icon--color--<%= subDir %>--<%= fileName %>--background--accent--alt {
    color: <%= fileColor %> !important;
    background-color: <%= fileColorAuto %>7f !important;
}
<% } %>
<% }); %>

Sources