Friday 09 May 2025
Error
  • JUser: :_load: Unable to load user with ID: 42
You are here: Home

Lists & Icons

Monday, 21 May 2012 00:05
Published in Typography
Written by  Read 411 times
Rate this item
(0 votes)

This is a sample page with examples on list and other icon paragraphs.

Social Icons

Social Icons

These classes are to be used for the social position.

Mini Social Icons

                           

Social Icons
	<a class="mini-social-icon delicious" href="#ol-mainnav" title="Delicious">&nbsp;</a> 
	<a class="mini-social-icon deviantart" href="#ol-footer" title="DeviantArt">&nbsp;</a> 
	<a class="mini-social-icon digg" href="#ol-mainnav" title="Digg">&nbsp;</a> 
	<a class="mini-social-icon dribbble" href="#ol-mainnav" title="Dribbble">&nbsp;</a> 
	<a class="mini-social-icon facebook" href="#ol-footer" title="Facebook">&nbsp;</a> 
	<a class="mini-social-icon flickr" href="#ol-footer" title="Flickr">&nbsp;</a> 
	<a class="mini-social-icon forrst" href="#ol-footer" title="Forrst">&nbsp;</a> 
	<a class="mini-social-icon google-plus" href="#ol-footer" title="Google+">&nbsp;</a> 
	<a class="mini-social-icon linkedin" href="#ol-footer" title="LinkedIN">&nbsp;</a> 
	<a class="mini-social-icon rss" href="#ol-topsl" title="RSS Feeds">&nbsp;</a> 
	<a class="mini-social-icon stumbleupon" href="#ol-topsl" title="StumbleUpon">&nbsp;</a> 
	<a class="mini-social-icon technorati" href="#ol-topsl" title="Technorati">&nbsp;</a> 
	<a class="mini-social-icon twitter" href="#ol-content" title="Twitter">&nbsp; </a> 
	<a class="mini-social-icon vimeo" href="#ol-footer" title="Vimeo">&nbsp;</a> 
	<a class="mini-social-icon yahoo" href="#ol-footer" title="Yahoo">&nbsp;</a> 
	<a class="mini-social-icon youtube" href="#ol-footer" title="YouTube">&nbsp;</a>
	<a class="social-icon delicious" href="#ol-mainnav" title="Delicious">&nbsp;</a> 
	<a class="social-icon deviantart" href="#ol-footer" title="DeviantArt">&nbsp;</a> 
	<a class="social-icon digg" href="#ol-mainnav" title="Digg">&nbsp;</a> 
	<a class="social-icon dribbble" href="#ol-mainnav" title="Dribbble">&nbsp;</a> 
	<a class="social-icon facebook" href="#ol-footer" title="Facebook">&nbsp;</a> 
	<a class="social-icon flickr" href="#ol-footer" title="Flickr">&nbsp;</a> 
	<a class="social-icon forrst" href="#ol-footer" title="Forrst">&nbsp;</a> 
	<a class="social-icon google-plus" href="#ol-footer" title="Google+">&nbsp;</a> 
	<a class="social-icon linkedin" href="#ol-footer" title="LinkedIN">&nbsp;</a> 
	<a class="social-icon rss" href="#ol-topsl" title="RSS Feeds">&nbsp;</a> 
	<a class="social-icon stumbleupon" href="#ol-topsl" title="StumbleUpon">&nbsp;</a> 
	<a class="social-icon technorati" href="#ol-topsl" title="Technorati">&nbsp;</a> 
	<a class="social-icon twitter" href="#ol-content" title="Twitter">&nbsp; </a> 
	<a class="social-icon vimeo" href="#ol-footer" title="Vimeo">&nbsp;</a> 
	<a class="social-icon yahoo" href="#ol-footer" title="Yahoo">&nbsp;</a> 
	<a class="social-icon youtube" href="#ol-footer" title="YouTube">&nbsp;</a>

Ordered List

  1. This is a sample Ordered List.
  2. Lorem ipsum dolor sit amet consectetur
  3. Lorem ipsum dolor sit amet consectetur
  4. Lorem ipsum dolor sit amet consectetur

Un-Ordered List

  • This is a sample Unordered List.
  • Lorem ipsum dolor sit amet consectetur
  • Lorem ipsum dolor sit amet consectetur
  • Lorem ipsum dolor sit amet consectetur

Definition List

This is a sample Definition List.
Condimentum quis.
Congue Quisque augue elit dolor.
Congue Quisque augue elit dolor.

Icon Unordered Lists

  •   This is a sample Arrow list.
  •   This is a sample Arrow list.
  •   This is a sample Arrow list.

 

  •   This is a sample Check list
  •   This is a sample Checklist
  •   This is a sample Checklist

 

  •   This is a sample Star list.
  •   This is a sample Star list.
  •   This is a sample Star list.
  •   This is a sample Phone list
  •   This is a sample Phonelist
  •   This is a sample Phonelist
  •   This is a sample Address list.
  •   This is a sample Address list
  •   This is a sample Address list
  •   This is a sample Mail list
  •   This is a sample Mail list
  •   This is a sample Mail list
Icon List Styles Sample Code
<ul class="ol-typo-list list-mail"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ol-typo-list list-address"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ol-typo-list list-phone"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ol-typo-list list-check"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ol-typo-list list-star"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ol-typo-list list-arrow"><li><span class="icon"> </span>List's content goes here!</li></ul>

More in this category: « Text Formating Buttons Styles »
back to top