title: Create box with an unicode-based icon on the left
body: <p>I want to create a CSS class that, when applied to a <code>div</code> or a <code>p</code> element will place that text in a colored box with an icon based on a unicode character vertically centered to the left of the text.   This is to use to create "To Do", "Note", "Warning" type call outs.</p>
  
  <p>For example I have this so far:</p>
  
  <pre><code>.todo {
    background-color: lightyellow;
    float: right;
    border: solid black 1px;
    padding: 10px;
    max-width: 30%;
  }
  
  .todo:before {
    content: "\2714";
    font-size: 250%;
  }
  </code></pre>
  
  <p>The usage of this class:</p>
  
  <pre><code>&lt;div class="todo"&gt;
  This is something that really needs to be done.   
  Even if you don't want to still do it.
  &lt;/div&gt;
  </code></pre>
  
  <p>Gives me a result like:</p>
  
  <p><a href="https://i.stack.imgur.com/QjXgp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QjXgp.png" alt="My To-Do Note"></a></p>
  
  <p>What I would like to do is make the check-mark bigger (my <code>font-size</code> term seems to be ignored) and place it vertically centered in the box and to the left of all text.   Can this be done without requiring styling or
  other elements in the <code>div</code> itself?</p>