WebFont Medical Icons – Specialized Clinical & Medical web fonts pack for UI design

 

Specialized in the Clinical & Medical world  Free and easy to use!

The package includes: SVGs, PNGs (64×64), Webfont (.eot, .ttf, .woff, .svg)

Usage:
/js/lib/modernizr-2.6.2.min.js
/js/lib/respond.min.js
http://js/main.jshttp://js/bootstrap.min.jshttp://js/jquery.highlight.js

1 Copy the fonts folder

  • packages/webfont-medical-icons/fonts

2 Copy the css file

  • packages/webfont-medical-icons/wfmi-style.css

3 In the head html, reference the location to the css file

  • <link rel=“stylesheet” href=“../css/wfmi-style.css”>

4 Add classes to your elements

  • <span class=“icon-laboratory” aria-hidden=“true”></span>

Customization
/js/lib/modernizr-2.6.2.min.js
/js/lib/respond.min.js
http://js/main.jshttp://js/bootstrap.min.jshttp://js/jquery.highlight.js

<span class=“icon-neurology” aria-hidden=“true”></span>

.icon-neurology {font-size: 7em;}


/js/lib/modernizr-2.6.2.min.js
/js/lib/respond.min.js
http://js/main.jshttp://js/bootstrap.min.jshttp://js/jquery.highlight.js

Downloading icons as PNG

1 Click on the icon you want

2 Select the desired colour

3 Enter the desired size (in px)

4 Click on ‘Get PNG file’

5 Save PNG file (ctrl+s or cmd+s)


/js/lib/modernizr-2.6.2.min.js
/js/lib/respond.min.js
http://js/main.jshttp://js/bootstrap.min.jshttp://js/jquery.highlight.js

This project is designed and built with by @samcome.


Website: http://samcome.github.io/webfont-medical-icons/


Thanks for reading,
Nabeel Shahid.