---
urlname: html-in-Fluid-demo
title: 自定义html-demo
date: 2020-06-19 22:00:00
excerpt: 博客『自定义html』下的demo。
---

<h1 class="main">Github Octicons icons</h1>
<div class="icons">
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z">
        </path>
      </svg>
    </div>
    <div class="name">GoAlert</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 14 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M13 2H1v2h12V2zM0 4a1 1 0 0 0 1 1v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H1a1 1 0 0 0-1 1v2zm2 1h10v9H2V5zm2 3h6V7H4v1z">
        </path>
      </svg>
    </div>
    <div class="name">GoArchive</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 8l6-5v3h8V3l6 5-6 5v-3H6v3L0 8z">
        </path>
      </svg>
    </div>
    <div class="name">GoArrowBoth</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 10 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M7 7V3H3v4H0l5 6 5-6H7z">
        </path>
      </svg>
    </div>
    <div class="name">GoArrowDown</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 10 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M6 3L0 8l6 5v-3h4V6H6V3z">
        </path>
      </svg>
    </div>
    <div class="name">GoArrowLeft</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 10 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 8L4 3v3H0v4h4v3l6-5z">
        </path>
      </svg>
    </div>
    <div class="name">GoArrowRight</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 6 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M4 7V5H2v2H0l3 4 3-4H4z">
        </path>
      </svg>
    </div>
    <div class="name">GoArrowSmallDown</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 6 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M4 7V5L0 8l4 3V9h2V7H4z">
        </path>
      </svg>
    </div>
    <div class="name">GoArrowSmallLeft</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 6 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M6 8L2 5v2H0v2h2v2l4-3z">
        </path>
      </svg>
    </div>
    <div class="name">GoArrowSmallRight</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 6 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M3 5L0 9h2v2h2V9h2L3 5z">
        </path>
      </svg>
    </div>
    <div class="name">GoArrowSmallUp</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 10 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M5 3L0 9h3v4h4V9h3L5 3z">
        </path>
      </svg>
    </div>
    <div class="name">GoArrowUp</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M14.38 14.59L11 7V3h1V2H3v1h1v4L.63 14.59A1 1 0 0 0 1.54 16h11.94c.72 0 1.2-.75.91-1.41h-.01zM3.75 10L5 7V3h5v4l1.25 3h-7.5zM8 8h1v1H8V8zM7 7H6V6h1v1zm0-3h1v1H7V4zm0-3H6V0h1v1z">
        </path>
      </svg>
    </div>
    <div class="name">GoBeaker</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 15 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M14 12v1H0v-1l.73-.58c.77-.77.81-2.55 1.19-4.42C2.69 3.23 6 2 6 2c0-.55.45-1 1-1s1 .45 1 1c0 0 3.39 1.23 4.16 5 .38 1.88.42 3.66 1.19 4.42l.66.58H14zm-7 4c1.11 0 2-.89 2-2H5c0 1.11.89 2 2 2z">
        </path>
      </svg>
    </div>
    <div class="name">GoBell</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 10 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M1 2h3.83c2.48 0 4.3.75 4.3 2.95 0 1.14-.63 2.23-1.67 2.61v.06c1.33.3 2.3 1.23 2.3 2.86 0 2.39-1.97 3.52-4.61 3.52H1V2zm3.66 4.95c1.67 0 2.38-.66 2.38-1.69 0-1.17-.78-1.61-2.34-1.61H3.13v3.3h1.53zm.27 5.39c1.77 0 2.75-.64 2.75-1.98 0-1.27-.95-1.81-2.75-1.81h-1.8v3.8h1.8v-.01z">
        </path>
      </svg>
    </div>
    <div class="name">GoBold</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M3 5h4v1H3V5zm0 3h4V7H3v1zm0 2h4V9H3v1zm11-5h-4v1h4V5zm0 2h-4v1h4V7zm0 2h-4v1h4V9zm2-6v9c0 .55-.45 1-1 1H9.5l-1 1-1-1H2c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h5.5l1 1 1-1H15c.55 0 1 .45 1 1zm-8 .5L7.5 3H2v9h6V3.5zm7-.5H9.5l-.5.5V12h6V3z">
        </path>
      </svg>
    </div>
    <div class="name">GoBook</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 10 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M9 0H1C.27 0 0 .27 0 1v15l5-3.09L10 16V1c0-.73-.27-1-1-1zm-.78 4.25L6.36 5.61l.72 2.16c.06.22-.02.28-.2.17L5 6.6 3.12 7.94c-.19.11-.25.05-.2-.17l.72-2.16-1.86-1.36c-.17-.16-.14-.23.09-.23l2.3-.03.7-2.16h.25l.7 2.16 2.3.03c.23 0 .27.08.09.23h.01z">
        </path>
      </svg>
    </div>
    <div class="name">GoBookmark</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 14 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M9 4V3c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H1c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1H9zM6 3h2v1H6V3zm7 6H8v1H6V9H1V5h1v3h10V5h1v4z">
        </path>
      </svg>
    </div>
    <div class="name">GoBriefcase</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M9 9H8c.55 0 1-.45 1-1V7c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1H6c-.55 0-1 .45-1 1v2h1v3c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-3h1v-2c0-.55-.45-1-1-1zM7 7h1v1H7V7zm2 4H8v4H7v-4H6v-1h3v1zm2.09-3.5c0-1.98-1.61-3.59-3.59-3.59A3.593 3.593 0 0 0 4 8.31v1.98c-.61-.77-1-1.73-1-2.8 0-2.48 2.02-4.5 4.5-4.5S12 5.01 12 7.49c0 1.06-.39 2.03-1 2.8V8.31c.06-.27.09-.53.09-.81zm3.91 0c0 2.88-1.63 5.38-4 6.63v-1.05a6.553 6.553 0 0 0 3.09-5.58A6.59 6.59 0 0 0 7.5.91 6.59 6.59 0 0 0 .91 7.5c0 2.36 1.23 4.42 3.09 5.58v1.05A7.497 7.497 0 0 1 7.5 0C11.64 0 15 3.36 15 7.5z">
        </path>
      </svg>
    </div>
    <div class="name">GoBroadcast</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 14 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M5 3h1v1H5V3zM3 3h1v1H3V3zM1 3h1v1H1V3zm12 10H1V5h12v8zm0-9H7V3h6v1zm1-1c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V3z">
        </path>
      </svg>
    </div>
    <div class="name">GoBrowser</div>
  </div>
  <div class="item" tabindex="0">
    <div class="icon h2">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M11 10h3V9h-3V8l3.17-1.03-.34-.94L11 7V6c0-.55-.45-1-1-1V4c0-.48-.36-.88-.83-.97L10.2 2H12V1H9.8l-2 2h-.59L5.2 1H3v1h1.8l1.03 1.03C5.36 3.12 5 3.51 5 4v1c-.55 0-1 .45-1 1v1l-2.83-.97-.34.94L4 8v1H1v1h3v1L.83 12.03l.34.94L4 12v1c0 .55.45 1 1 1h1l1-1V6h1v7l1 1h1c.55 0 1-.45 1-1v-1l2.83.97.34-.94L11 11v-1zM9 5H6V4h3v1z">
        </path>
      </svg>
    </div>
    <div class="name">GoBug</div>
  </div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pxxyyz/blog-file@1.0.7/css/Cheatsheet.css">