Font Awesome V4 - Pulled Icons Example

Using Font Awesome Icons within a web page is super easy

  • Include the icon library CDN within the head section of a document
  • Then access the icons using their predefined classes from the library

Here is the example that explains how to define Font Awesome Pulled Icons using the predefined classes fa-pull-left and fa-pull-right.

Run this on IDE

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body style="font-size: 20px;">    
    <h1>Pulled Icons</h1>
    <div>
        <i class="fa fa-quote-left fa-pull-left"></i>
        <i class="fa fa-quote-right fa-pull-right"></i>
        <p>...Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</body>
</html>

Overall

This example helps us understand how to create Font Awesome Pulled Icons.

Related Links