OpenWeb Icons

Installation

It's easy to combine the OpenWeb Icons Font with Twitters Bootstrap, or even use it as "standalone".

Use a package manager

Install and manage OpenWeb Icons Font- and CSS-Files using Bower, NPM, Components or Composer.

Install with Bower

$ bower install openwebicons

Install with Components

$ component install pfefferle/openwebicons

Install with NPM

$ npm install openwebicons

Install with Composer

To install the OpenWeb Icons with Composer, you have to add the following code to your composer.json file and then run php composer.phar install.

{
    "require": {
        "pfefferle/openwebicons": "*"
    }
}

Integration

It's easy to combine the OpenWeb Icons Font with Twitters Bootstrap, or even use it as "standalone".

Custom CSS

Add OpenWeb Icons support to one of your CSS files

Copy the OpenWeb Icons font directory into your project.

Open your project's css file and add the following code to the top.

@font-face {
  font-family: 'OpenWeb Icons';
    src: url('../font/openwebicons.eot');
    src: url('../font/openwebicons.eot?#iefix') format('embedded-opentype'),
         url('../font/openwebicons.woff2') format('woff2'),
         url('../font/openwebicons.woff') format('woff'),
         url('../font/openwebicons.ttf') format('truetype'),
         url('../font/openwebicons.svg#OpenWebIconsRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Now you can mark up your code like that <i style="font-family: 'OpenWeb Icons'"></i> (OAuth Icon)

We Love Icon Fonts

weloveiconfonts.com "is a free & open source icon-fonts hosting service (like Google Web Fonts, but icon fonts only)" by Tim Pietrusky

The "We Love Icon Fonts"-Webservice is a simple and easy way to use the OpenWeb-Icons in your Web-Project. You don't have to provide a copy of all the css and font files, simply add the following code to the top of your main CSS-file and that's it!

@import url(http://weloveiconfonts.com/api/?family=openwebicons);

/* openwebicons */
[class*="openwebicons-"]:before {
  font-family: 'OpenWeb Icons', sans-serif;
}

Be sure to use openwebicons- instead of icons-. To display the RSS-icon, use <i class="openwebicons-feed"></i> for example.

Together with Bootstrap or/and Font Awesome

Use this method if you want to use the OpenWeb-Icons with Twitters Bootstrap or Font Awesome.

Copy the OpenWeb Icons font directory into your project.
Copy openwebicons-bootstrap.css into your project.
Open your project's openwebicons-bootstrap.css and edit the font url to ensure it points to the right place (see above example).

In the <head> of your html, reference the location to your openwebicons-bootstrap.css.

<link rel="stylesheet" href="../css/bootstrap.css" />
<link rel="stylesheet" href="../css/openwebicons-bootstrap.css" />

Not using Bootstrap or Font Awesome

OpenWeb Icons works with any CSS.

Copy the OpenWeb Icons font directory into your project.
Copy openwebicons.css into your project.
Open your project's openwebicons.css and edit the font url to ensure it points to the right place (see above example).

Usage