What is Font Awesome?
Font Awesome's pulled icons use utility classes to adjust icon alignment in relation to surrounding text. This is especially useful when you're building lists or inline text where you want the icon to be visually aligned to either side (left or right) and vertically centered. The term "pulled" refers to pulling an icon to the left or right using these classes:
fa-pull-left: Floats the icon to the left.fa-pull-right: Floats the icon to the right.
Here's an example ↓
HTML
<div class="demo-container">
<i class="fa-solid fa-quote-left fa-2x fa-pull-left fa-pulled-demo-left"></i>
Contrary to popular belief, the brain cannot effectively handle more than one task at a time. It switches rapidly between tasks, giving the illusion of multitasking.
</div>
Font Awesome CSS Link
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
CSS
.demo-content {
margin: 0 auto;
max-width: 460px;
font-family: "Roboto", sans-serif;
font-size: 2rem;
line-height: 2rem;
padding: 2rem;
}
.demo-content .fa-pull-left {
font-size: 4rem;
}
Arrow at the bottom
Arrow at the bottom with a utf-8 character
Arrow at the top of a container
Aside
Background color
Blackboard design
Breadcrumbs design
Calendar design
Checkboxes as circular buttons
Checkboxes as toggle switches
Cursor properties
Circular image with a shadow effect
Font Awesome pulled icons
Gallery picture frame with a price ribbon
Google pie chart
Google web fonts
Last child and not last child element
Letter spacing
List items with a Font Awesome icon
Neon text
Neon text with a flickering effect
Notebook paper background
Radio buttons as circular buttons
Radio buttons as rating stars
Remove the glow effect from an input field
Search bar with categories
Track (audio/video subtitles)
Web fonts
Whiteboard design