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

ic ic-alarm ic-3x ic-border 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

One

Bounding Boxes SHAPES

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.

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.

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

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

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..

Centered Features - class="feature centered" CENTERED

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

Unlimited colors, hundreds of customizable elements

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

Customizable responsive layout based on fluid grid

50+ placeholders to display custom content

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