title: html5 bug? details > summary > I tag with font awesome link, not clickable
body: <p>Clicking a font awesome item inside a tag embedded inside of a details summary tag should result in visiting the link, instead details tag captures click event. Is this the expected behavior(I would not think so) or a bug in HTML5?</p>
  
  <pre><code>&lt;details&gt;
   &lt;summary&gt;
    Details
    &lt;a href="http://google.com"&gt;
     &lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt;
      Visit Google
    &lt;/a&gt;
   &lt;/summary&gt;
   &lt;p&gt; The Searching Site&lt;/p&gt;
  &lt;/details&gt;
  </code></pre>
  
  <p>example: <a href="https://codepen.io/anon/pen/GGgyNz" rel="nofollow noreferrer">https://codepen.io/anon/pen/GGgyNz</a>
  <em>Note I think codepen overrides external links but the details tab should not be triggered when the Font Awesome tag is clicked</em></p>
  
  <p><br></p>
  
  <p><strong>Incase pen is not working, Full HTML:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="container"&gt;
    &lt;h2&gt;Details Tag and Font Awesome Link Issue&lt;/h2&gt;
    &lt;details&gt;
      &lt;summary&gt;
        Details
        &lt;a href="http://google.com"&gt;
          &lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt; Visit Google
        &lt;/a&gt;
      &lt;/summary&gt;
      &lt;p&gt; The Searching Site&lt;/p&gt;
    &lt;/details&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>