HTML and CSS

Font Awesome Pulled Icons

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.

What is Font Awesome?

Font Awesome is a popular icon set and toolkit used by designers, developers, and content creators. It offers over 30,000 icons in 9 styles, which you can customize using CSS and JavaScript. Here's an example:

Font Awesome CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

HTML

<div class="demo-container"> 
 <div class="demo-content">
  <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> 
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Oswald&family=Roboto:wght@300&display=swap'); 

.demo-content {
  margin: 0 auto;
  max-width: 460px;
  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  line-height: 2rem;
  padding: 2rem;
}

.fa-pulled-demo-left {
  margin-left: 10%;
  font-size: 4rem;
}