BC-Font

The Developer Font with 1,000+ icons

Summary

Description

BC-Font is an easy-to-use, high-quality and more globally a must-have font for IT workers, specially developers.
With more than 1,000 icons separated into 27 categories, this product is available for every use: Desktop font, Web, Print, Design...
This font comes with a handy website that permits you to find the ideal icons for your project.

Tags

Icon_FontAutomatic_Build

Links

Npm PackageGitHubLive versionDribbble Project

Technologies

GimpWebpackInkscape

Presentation

The font for IT Professionals
1,005* icons.

27* categories.

For all your needs.

Available for Desktop, Web, Print, Design...

(* as of 1.8.0 version)

Branding


Base name
/ characterSignification: Code, Architecture

BC-Font

Key Functonalities

The user can browse through icon categories:
  • Each icon on top of the official color
  • A filter menu is available to filter icons by category
  • New icons are indicated via the "NEW" badge

Each icon is shown along with its name. When clicking on an icon, a drawer appears and contains:
  • The icon on top of the official color
  • Its name and category
  • Its official color along with a "To clipboard" button
  • The syntaxically coloured HTML code with a "To clipboard" button
  • Associated icons (alternatives to this icon) that opens the selected alternative icon when clicked

Wireframing

Colors

Red: Emotion, Stimulate#EB2834
Gray: Neutral, Formal#404040
Gray: Neutral, Formal#E0E0E0

Fonts

Website FontRoboto - Google Fonts
BC-Font iconsBC-Font package

Badges

"New" badge for newest icons

Final logo

Full-Size Logo
Simplified Logo

Screenshots

Font

The BC-Font consists of 1,005 Unicode characters separated into 27 categories (as of 1.8 version) :

Technologies

Webpack With an incredible choice of loaders, WebPack bundles any web application / JS files. Here, following loaders are used:
  • css-loader
  • mini-css-extract-plugin
  • style-loader
  • webfonts-loader

Icon Categories

Icons are sorted into categories that user can use to filter icon visualization on the website, along with examples (as of 1.8 version):
  • All
  • AI, BI & Big DataQlikSense, SAS, Talend
  • APIsCoinBase, Facebook, Paypal
  • Analysis & MarketingGoogle Ads, Analytics, SalesForce
  • Back-EndPHP, Cobol, Spring, Ruby
  • BrandsAdobe, Qwant, W3C
  • BrowsersEdge, Chrome, Opera
  • Cloud & VirtualizationAWS, Azure Autoscaling, GCP App Engine
  • Code VersioningGit, Hub, GitHub
  • DatabasesCassandra, Postgre, SQLite
  • DevOps & QualityTomcat, Sonar, Gradle
  • E-commerce SolutionsDrupal, WooCommerce, Opencart
  • ERPsSAP, Odoo, IFS
  • File FormatsJSON, Markdown, YAML
  • Front-EndAngular, CSS, Babylon
  • GIS & GeoCarto, Google Maps, QGIS
  • Game Engines & SoftwaresCry Engine, SDL, Ogre
  • Graphics & 3DBehance, Inkscape, Solidworks
  • HardwareBluetooth, Raspberry, Graphic Card
  • IDE & DB SoftwaresCode Sandbox, NetBeans, IntelliJ
  • MobileAndroid, Expo, Play Store
  • OfficeWord, Google Slides, Zimbra
  • Operating SystemsArch Linux, Windows 10, MacOS
  • Package ProvidersComposer, Maven, NPM
  • Personal
  • Recruitment WebsitesIndeed, Monster, WeLoveDevs
  • Social NetworksFlickr, Facebook, Whereby
  • Training WebsitesCodeAcademy, LiveMentor, Udacity

Font Build

1. Theme SelectionFind interesting icons to add to the font
2. Image SelectionPick the right image to start with
3. Image ConversionConvert to an alpha and square-shaped image
4. VectorizingConvert the raster image to a vector one
5. Build the packageAutomated process that generated the font
6. Update the icon mapShow the icon on the website, along with color and other characteristics