ULTIMO class testing for Icons

SIZE TESTS

ic ic-star ic-lg

ic ic-gift ic-2x

ic ic-twitter ic-3x

controling with inline styles --- font-size 32px



Pull left and Pull Right

ic ic-alarm ic-3x ic-border pull-left

this is some text after a pull left

this is some text after a pull left

this is some text after a pull left

ic ic-alarm ic-3x ic-border pull-right

this is some text after a pull right

this is some text after a pull right

this is some text after a pull right



IC-UL

  • Some text example
  • Some text example
  • Some text example
  • Some text example
  • Some text example


putting an icon in a button

  My Account

SPINS and Flips

ic ic-reload ic-spin

normal

ic-rotate-90

ic-rotate-180

ic-rotate-270

ic-flip-horizontal

ic-flip-vertical



Turn Caracters into icons?Chacters

1

One

2

One

a

One

B

One

$

One

%

One



Bounding Boxes SHAPES

ic ic-star ib ib-square

ic ic-star ib ib-square

ic ic-star ib ib-square

By default the iconbox is circular. If you prefer square icons, you can wrap multiple icons with an element with class ib-wrapper--square:



Change multiple bounding boxes to square or ....with wrapper class



SOCIAL ICONS with hover effect

ib ib-hover ic ic-lg ic-twitter>

ib ib-hover ic ic-lg ic-facebook>



icon Indents using FEATURE wrapper div class....class="feature" ...no left or right for span

span class="ic ic-star ib"

Secondary Heading class="above-heading"

Block Heading Example

This is a paragraph of sample text. Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis.

Another paragraph. Etiam neque velit, blandit sed scelerisque solare de equis.

This is a paragraph of sample text. Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis.

Another paragraph. Etiam neque velit, blandit sed scelerisque solare de equis.

This is a paragraph of sample text. Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis.

Another paragraph. Etiam neque velit, blandit sed scelerisque solare de equis.

Read more...


icon Indents using FEATURE wrapper div---BUT icon span is class left ic ic-star ib

span class="left ic ic-star ib"

Secondary Heading class="above-heading"

Block Heading Example

If you add class left or right to the icon, the icon will be taken from the normal flow and placed along the left or right side of its container, and text will wrap around it.

This is a paragraph of sample text. Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis.

Another paragraph. Etiam neque velit, blandit sed scelerisque solare de equis.

This is a paragraph of sample text. Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis.

Another paragraph. Etiam neque velit, blandit sed scelerisque solare de equis.

This is a paragraph of sample text. Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis.

Another paragraph. Etiam neque velit, blandit sed scelerisque solare de equis.

Read more...


icon intents using FEATURE with hover class="feature feature-icon-hover"

span class="left ic ic-star ib"

Block Heading Example

To change the background color of the iconbox on mouse hover over the entire block, add class feature-icon-hover to the main element

To change the background color of the iconbox on mouse hover over the entire block, add class feature-icon-hover to the main element

To change the background color of the iconbox on mouse hover over the entire block, add class feature-icon-hover to the main element



icon indents with ONLY FEATURE a class="feature" nother example

class="left ic ic-star ic-2x ib ib-size-xl"

Block Heading - LEFT

This is a paragraph of sample text. Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Sibit placem vobetur rios tolbaro del rei como deus selvince daso rex.

If you add class left or right to the icon, the icon will be taken from the normal flow and placed along the left or right side of its container, and text will wrap around it.



class="right ic ic-star ic-2x ib ib-size-xl"

Block Heading - RIGHT

This is a paragraph of sample text. Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Sibit placem vobetur rios tolbaro del rei como deus selvince daso rex.

This is a paragraph of sample text. Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Sibit placem vobetur rios tolbaro del rei como deus selvince daso rex.

This is a paragraph of sample text. Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Sibit placem vobetur rios tolbaro del rei como deus selvince daso rex.



Indentint the block out of main flow class="fature feature-icon-hover indent"

class="ic ic-star ib"

Block Heading Example

To display a block with indentation on the left side, add class indent to the main element:This is a paragraph of sample text.



Feature Class - class="feature feature-icon-hover indent indent-size-xxl" Indent and then indent more because of larger bounding box

class="ic ic-star ib ib-size-xxl"

Block Heading Example

class="ic ic-star ib ib-size-xxl"

If you increase the iconbox size (by adding a class such as ib-size-xxl), you would also need to add class indent-size-xxl to the main block. It will adjust the size of the indentation..

This is a paragraph of sample text. Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Sibit placem vobetur rios tolbaro del rei como deus selvince daso rex.

This is a paragraph of sample text. Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Sibit placem vobetur rios tolbaro del rei como deus selvince daso rex.

This is a paragraph of sample text. Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Sibit placem vobetur rios tolbaro del rei como deus selvince daso rex.



Centered Features - class="feature centered" CENTERED

My description

Title

To align elements of the block to the center, use class centered. Like thisThis is sample text

Another paragraph

EXAMPLE OF ICONS IN MULTIPLE FEATURES

Key Features
1

Unlimited colors, hundreds of customizable elements

class="feature feature-icon-hover indent first"

2

Customizable responsive layout based on fluid grid

3

50+ placeholders to display custom content

4

Create your custom sub-themes (variants)

Company Info

Call Us +001 555 801
Fax +001 555 802

+77 123 1234
+42 98 9876

boss@example.com
me@example.com

Skype: samplelogin
skype-support