Icon font

webdev-font

Icon font for popular web frameworks and web related technologies.

110+ icons and counting...

Getting Started

Using a CDN

To get started quickly, paste the following snippet within the head tag of your .html file. This uses jsdelivr to act as the CDN for this repository.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nickpolet/webdev-font/dist/webdev-font.min.css">

Going DIY

If you would like to manually include the font in your project, download the project from github and copy the "dist" folder into your project. You can then link the to the css file using the standard...

<link rel="stylesheet" href="/path/to/dist/webdev-font.min.css">

Please make sure you copy over the woff, woff2 & eot files. The stylesheets has relative references to them, so if you change the location of the font files, you'll need to update the paths inside of webdev-font.css.

Usage

If you've used font-awesome or one of the many font icon sets out there, then you find this very simple (just replace "fa" with "wd").

Using <i> tags in html, use the class attribute to show different icons.

<i class="wd wd-react"></i>

<i class="wd wd-vue"></i>

<i class="wd wd-github"></i>

angular

apache

aura

aws

azure

backbone

bitbucket

bootstrap

bottle

bower

cakephp

celluloid

cherry

cloudflare

cloudify

codeigniter

cplusplus

csharp

css

cuba

derby

digital-ocean

django

docker

dojo

dotnet

elixir

ember

erlang

express

flask

foundation

gandi

ghost

git

github

go-daddy

google-cloud

google-web-toolkit

grails

grape

grunt

gulp

gunicorn

hapi

haskell

heroku

html5

ionic

java

javascript

jquery

knockout

laravel

lisp

lotus

mariadb

materialize

meanjs

meteor

modulus

mongodb

mysql

namecheap

nginx

nodejs

oracle

pakyow

phalcon

phoenix

php

play

polymer

postgresql

purecss

pyramid

python

rackspace

rails

react

redux

ruby

rust

sails

snap

socketio

socketstream

spark

spock

spring

sqlite

squarespace

sugar

swift

symfony

teslajs

tornado

totaljs

turbogears

uikit

vaadin

vue

webpack

webpy

wordpress

yesod

yii

zend

No results

Adding your own icons

First of all, we'll need to clone this git repository with

git clone https://github.com/nickpolet/webdev-font.git

Then we'll need to install the javascript dependancies.

yarn install

Add your own icons into the assets/icons folder. At the moment, these need to be SVG files, with the canvas set to 1000 x 1000px. You can use inkscape or any other vector graphics program to create these.

Once you've added in any icons, run

yarn run build

The generated CSS and font files will be available into the 'dist' folder. There is also a 'webdev-font.html' file which is this the same as this page, but with any updated icons.