How to use font awesome like medical icons in CSS

In some applications like hospital related software, you will need to use icons that fit the necessities of your clients. Although there aren't plenty of options when we talk about medical icons in the open source world, surely there's an option that you can use and works in the same way that Font Awesome does. In this little article, we want to share with you an open source collection of icons for the web with relation to the medical world and how to use them in your web project, enjoy them !

1. Download medical icons package

Download the package of icons from the official repository of the icons and extract its content into some folder. Inside this folder you will find the packages/webfont-medical-icons directory that contains the fonts in web format and the css file to include in your web project. For more information about these awesome free medical icons for the web, please visit the official repository at Github here or the official homepage.

2. Include wfmi-style.css in your document

Is important to note that the css file search for the fonts in the parent directory (../fonts), which means that you need to include the package in the following way in your project (medical_icons can be obviously changed, but the internal structure needs to work in the same way):

So, you will only need to include the CSS file in your document and that's it:

<link rel="stylesheet" href="medical_icons/css/wfmi-style.css">

You will able now to use the medical icons in your application in the same way that Font Awesome.

3. Using icons

Once the wfmi-style.css has been included in your document, you will be able to use all the icons of the library in your document. Basically, every icon correspond to a class that displays the icon on your span element. The library offers 4 categories with a total of 144 icons that you can use, these categories are:

1. Clinical & Medical
2. Administration & Facilities
3. Imaging
4. Department of transportation (DOT)

To add an icon in your application, simply embed the class of the icon in an empty span element:

<span class="medical-icon-laboratory" aria-hidden="true"></span>

For example, with the following little list of icons, you would only need to replace the class in the previous element and they will display the desired icon:

As mentioned previously, the library offers a lot of icons so is up to you to see them in the official webpage here.

Changing icon size

If you want to change the size of a specific icon, just specify the font-size with css and that's it:

<style>
    .medical-icon-laboratory {
        font-size: 7em;
    }
</style>
<span class="medical-icon-laboratory" aria-hidden="true"></span>

The official page offers as well an icon selector that helps you to choose quickly the icon that you need from the big list that the library offers.

Happy coding !