Examples

Basic usage

You can place Font Awesome icons just about anywhere with the <i> tag.

Use it in front of some text:

openwebicons-geo

<p><i class="openwebicons-geo"></i> openwebicons-geo</p>

or inline some text:

HTML Powered with CSS / Styling

HTML <i class="openwebicons-html5"></i> Powered with CSS <i class="openwebicons-css3"></i> / Styling

Bootstrap Examples

Many examples re-used from the Twitter Bootstrap documentation.

List items

  • OPML List
  • RSS-Feed
  • ATOM-Feed
  • ActivityStream
<ul>
    <li class="openwebicons-opml">OPML List</li>
    <li class="openwebicons-feed">RSS-Feed</li>
    <li class="openwebicons-feed">ATOM-Feed</li>
    <li class="openwebicons-activity">ActivityStream</li>
</ul>

Forms

<form>
  <div class="control-group">
    <div class="input-group">
      <span class="input-group-addon"><i class="openwebicons-openid"></i></span>
      <input class="form-control" id="prependedInput" size="16" type="text" placeholder="login with OpenID" />
    </div>
  </div>
</form>

Buttons

Login Subscribe Follow

Share Share Edit

Read Save to Phone Fork me! 

<a class="btn btn-primary" href="#"><i class="openwebicons-openid"></i> Login</a>
<a class="btn btn-default btn-sm" href="#"><i class="openwebicons-epub-colored"></i> Read</a>
<a class="btn btn-default btn-sm" href="#"><i class="openwebicons-qr"></i> Save to Phone</a>

Alerts and Notizes

This file is licensed under the 3.0
× Is Twitter allowed to access your location? 
<div class="alert alert-success">This file is licensed under the <i class="openwebicons-cc"></i> <i class="openwebicons-cc-by"></i> 3.0</div>

<div class="alert alert-info">
    <a class="close" data-dismiss="alert" href="#">×</a>
    <i class="openwebicons-geo"></i> Is Twitter allowed to access your location?
</div>

Colored Icons

A lot of icons also have colored versions. You can use them by adding a -colored at the end of the class names.

  • openwebicons-apml-colored
  • openwebicons-open-share-colored
  • openwebicons-share-colored
  • openwebicons-epub-colored
  • openwebicons-microformats-colored
  • openwebicons-osi-colored
  • openwebicons-feed-colored
  • openwebicons-ostatus-colored
  • openwebicons-remote-storage-colored
  • openwebicons-odata-colored
  • openwebicons-git-colored
  • openwebicons-html5-colored
  • openwebicons-geo-colored
  • openwebicons-gnusocial-colored
  • openwebicons-javascript-colored
  • openwebicons-activity-colored
  • openwebicons-opml-colored
  • openwebicons-opensearch-colored
  • openwebicons-info-card-colored
  • openwebicons-id4me-colored

PubSubHubbub Icon

Use the following HTML Code: <i class="openwebicons-pub-colored"></i><i class="openwebicons-sub-colored"></i><i class="openwebicons-hubbub-colored"></i> to display the colored PubSubHubbub-Icon: (Let me know if you have some ideas to make this simpler)

Gradients

Text-gradients are currently WebKit only.

/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#679a06), color-stop(49%,#85bc07), color-stop(100%,#aee219), color-stop(100%,#2989d8));

/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(45deg,  #679a06 0%,#85bc07 49%,#aee219 100%,#2989d8 100%);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#27529d), color-stop(49%,#248ea1), color-stop(100%,#27529d), color-stop(100%,#aee219));

/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(-45deg,  #27529d 0%,#248ea1 49%,#27529d 100%,#aee219 100%);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e4712d), color-stop(49%,#fb9e3a), color-stop(100%,#e4712d), color-stop(100%,#27529d));

/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(-45deg,  #e4712d 0%,#fb9e3a 49%,#e4712d 100%,#27529d 100%);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;