Software Highlight: TechFont

Working on a portfolio or similar project where you want icons to display what tech stack you’re using? TechFont is here to help.

I usually turn to Font Awesome for any project in need of icons, but they don’t have brand icons for everything, and the ones they do have don’t support multi-color. To my surprise, I couldn’t find any icon library with a standardized design or multi-color support.

TechFont on the other hand has 84+ icons, including icons in single and multi-color, with and without background. To start, I only made the icons I needed, including languages like JS, NodeJS, C, C++, PHP, HTML, and CSS, as well as libraries and tools such as Vue, Vite, Electron, Express, etc., but I will try to add more to build a full library of icons to use.

The TechFont icon library is available for use as a standalone Font + CSS file, available from the CDN, NPM, or direct download.

Multi-Color Icons

In order to utilize multi-colored icons, an additional CSS / JS file is needed. The multi-colored icons are rendered using a layered approach (as CSS natively can only handle two-tone icons like those used in Font Awesome). Each layer is written as a cell in a CSS grid that are in the same row / column to overlay and maintain the same positioning without absolute positioning.

To maintain the same syntax of rendering an icon with the tag:

<i class="tf tf-icon"></i> 

the JS file scans the document for matching tags, then inserts the correct layers as new children of the tag. This approach allows the same single-tag approach to be applied to icons with any number of layers.

However, if you want to render an icon without the JS file, you can copy the bulkier code that is generated by the JS file. For example, here is the raw HTML needed to render the vue-clr-b icon without JS:

<i class="tf tf-vue-clr-b tf-processed">
  <div class="tf-wrapper">
    <i class="tf tf-5x tf-fw cursor-pointer tf-background"></i>
    <i class="tf tf-5x tf-fw cursor-pointer tf-vue-pt2"></i>
    <i class="tf tf-5x tf-fw cursor-pointer tf-vue-pt1"></i>
  </div>
</i>

The same syntax applies for all multi-colored icons, where the outermost element is the original -clr class, followed by a wrapper div, then the individual parts of the icon with the backmost layer first, and the frontmost layer last, with the lowest number being the frontmost part.

Background Color

Want to apply your own background color to a multi-color icon? Simply override the .tf-background class.

To change the background color for all icons, use:

.tf-background::before {
  color: blue;
}

To change the background color for a single icon, use:

.tf-mongodb-clr-b .tf-background::before {
    color: blue;
}

For more information on TechFont, read the documentation: TechFont Docs

To request a new icon, submit an issue on GitHub: New Icon Request