title: Place icon container over image - top left and top right
body: <p>I am trying to create an element for a site-builder where I can place an icon on top of an image:</p>
  
  <p>top-left:</p>
  
  <pre><code>-------
  |*    |
  |     |
  -------
  </code></pre>
  
  <p>top-right:</p>
  
  <pre><code>-------
  |    *|
  |     |
  -------
  </code></pre>
  
  <p>I have the following html:</p>
  
  <pre><code>&lt;article class="col-md-4 project selected-column" contenteditable="true"&gt;
    &lt;figure class="member square"&gt;
      &lt;div&gt;
        &lt;aside&gt;
          &lt;i class="sub_icon fa fa-asterisk circle" style=" font-size:18px; line-height:21px;"&gt;&lt;/i&gt;
        &lt;/aside&gt;
        &lt;div class="image-container square-container"&gt;
          &lt;/div&gt;
            &lt;img class="img-responsive" style="margin:auto;" src="http://placehold.it/250x250&amp;amp;text=Afbeelding"&gt;  
          &lt;/div&gt;
        &lt;figcaption&gt;
          &lt;h4 style="text-align:center;" contenteditable="true"&gt;Voer hier uw naam in&lt;/h4&gt;
          &lt;p style="text-align:center; font-style:italic;;" contenteditable="true"&gt;Voer hier uw subtitel in&lt;/p&gt;
          &lt;p style="text-align:center;" contenteditable="true"&gt;Voer hier uw titel in&lt;/p&gt;
        &lt;/figcaption&gt;
    &lt;/figure&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>The CSS that I have atm:</p>
  
  <pre><code>figure&gt;div{
    display:table;
    margin:0 auto;
  }
  
  aside {
    position:absolute;
    width:40px;
    height:40px;
    background-color:#fff;
    text-align:center;
  }
  
  i {
    position:relative;
    top: calc(50% - 10px)
  }
  </code></pre>
  
  <p>The code above places the icon container top left inside the image, which seemed like half of the work.
  But with this CSS and HTML I cannot place the icon container top right.</p>
  
  <p>How to style this HTML so that I can place the icon top left AND top right?</p>
  
  <p>I have a JSfiddle <a href="http://jsfiddle.net/abayob/gehjtvug/2/" rel="nofollow">here</a></p>