Typography

15 September 2018
Oleh:
1864

Berita Utama

Base Typography

This is an H1 Heading

<h1>This is an H1 Heading</h1>

This is an H2 Heading

<h2>This is an H2 Heading</h2>

This is an H3 Heading

<h3>This is an H3 Heading</h3>

This is an H4 Heading

<h4>This is an H4 Heading</h4>

This is an H5 Heading

<h5>This is an H5 Heading</h5>

ropcap Styling for article intros and much more. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nunc lorem, eleifend vel, rhoncus sed, congue quis, leo. Aliquam dignissim dui quis purus. Phasellus vehicula, ante eu mollis pharetra, enim felis iaculis lacus, congue ullamcorper lorem eros at libero.

<div class="dropcap">D</div>ropcap Styling

This is the Example Quote Class this can be used to create quotes in article pages by using the code below

<blockquote class="opensmall">This is the Example Quote Class</blockquote>

Example LG Quote Class

<blockquote class="openlarge">This is the Example Quote Class</blockquote>

This is the code div class. Curabitur bibendum metus porta dui sagittis sagittis. Suspendisse placerat orci eget massa. Donec vitae nisi. Sed tincidunt adipiscing mauris. In lorem. Maecenas dapibus commodo sapien.

<div class="code">This is the code div class</div>

This is the highlight div class. Curabitur bibendum metus porta dui sagittis sagittis. Suspendisse placerat orci eget massa. Donec vitae nisi. Sed tincidunt adipiscing 

mauris. In lorem. Maecenas dapibus commodo sapien. Nam nulla.

<div class="highlight">This is the highlight div class</div>

Blog Div Styles

This is Blog Red

This is Blog Blue

This is Blog Green

<div class="blog-green">blog-green</div>

This is Blog Cyan

This is Blog Tan

This is Blog Yellow

<div class="blog-yellow">blog-yellow</div>

This is Blog Grey

This is Blog Pink

Note Style

This the note style. Curabitur bibendum metus porta dui sagittis sagittis. Suspendisse placerat orci eget massa. Donec vitae nisi. Sed tincidunt adipiscing mauris. In lorem. Maecenas dapibus commodo sapien. Nam nulla.

<div class="note">This is note style</div>

Flat Button Styles

<button class="btnblue">Blue Button</button>

<button class="btnred">Red Button</button>

<button class="btngreen">Green Button</button>

<button class="btngrey">Grey Button</button>

<button class="btnyellow">Yellow Button</button>

<button class="btnorange">Orange Button</button>

<button class="btn basecolor_1">BaseColor 1</button>

<button class="btn basecolor_2">BaseColor 2</button>

<button class="btn basecolor_3">BaseColor 3</button>

<button class="btn basecolor_4">BaseColor 4</button>

<button class="btn basecolor_5">BaseColor 5</button>

<button class="btn basecolor_6">BaseColor 6</button>

<button class="btn basecolor_7">BaseColor 7</button>

<button class="btn basecolor_8">BaseColor 8</button>

P Styles

Error style

Ideas style

Message style

Astrix style

This is com

This is mod

This is plug

This is lang

This is RSS

Font Awesome Icon Sets

Font Awesome Icons work with an i class and the icon name:


<i class="fa fa-ICONNAME"></i>

You can also use them as an a class with only the icon name. This also works in the menu class manager.


<a class="ICONNAME"></a>

battery-three-quarters

Web Application Icons

adjust

anchor

Hand Icons

Transportation Icons

Gender Icons

File Type Icons

file-picture-o (alias)

Spinner Icons

These icons work great with the fa-spin class. Check out the spinning icons example.

Form Control Icons

Payment Icons

Chart Icons

Currency Icons

Text Editor Icons

Directional Icons

Video Player Icons

Brand Icons

Warning!

Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be an error. To work around this, you'll need to modify the social icon class names.

y-combinator-square (alias)

All brand icons are trademarks of their respective owners.
The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.