shape

API Methods

setShape

setText

Attribute Names

data-shape

data-text

Elements
    Properties
      Sizes
        SVG
        <img data-src="shape.svg" class="iconic iconic-sm" alt="shape">
<img data-src="shape.svg" class="iconic iconic-md" alt="shape">
<img data-src="shape.svg" class="iconic iconic-lg" alt="shape">
        Default Icon Font
        <span class="iconic iconic-sm" data-glyph="shape-square-undefined" title="shape square undefined" aria-hidden="true"></span>
<span class="iconic iconic-md" data-glyph="shape-square-undefined" title="shape square undefined" aria-hidden="true"></span>
<span class="iconic iconic-lg" data-glyph="shape-square-undefined" title="shape square undefined" aria-hidden="true"></span>
        Bootstrap Icon Font
        <span class="iconic iconic-shape-square-undefined iconic-sm" title="shape square undefined" aria-hidden="true"></span>
<span class="iconic iconic-shape-square-undefined iconic-md" title="shape square undefined" aria-hidden="true"></span>
<span class="iconic iconic-shape-square-undefined iconic-lg" title="shape square undefined" aria-hidden="true"></span>
        Foundation Icon Font
        <span class="fi-shape-square-undefined iconic-sm" title="shape square undefined" aria-hidden="true"></span>
<span class="fi-shape-square-undefined iconic-md" title="shape square undefined" aria-hidden="true"></span>
<span class="fi-shape-square-undefined iconic-lg" title="shape square undefined" aria-hidden="true"></span>
        CSS

        Semantic SVG

        data-shape

        Sets the shape

        • square

          <img data-shape="square" data-src="shape.svg" class="iconic" alt="shape" />

        • square-rounded

          <img data-shape="square-rounded" data-src="shape.svg" class="iconic" alt="shape" />

        • hexagon

          <img data-shape="hexagon" data-src="shape.svg" class="iconic" alt="shape" />

        • octagon

          <img data-shape="octagon" data-src="shape.svg" class="iconic" alt="shape" />

        • circle

          <img data-shape="circle" data-src="shape.svg" class="iconic" alt="shape" />

        data-text

        Sets the text value inside the shape

        • cb

          <img data-text="cb" data-src="shape.svg" class="iconic" alt="shape" />

        • dj

          <img data-text="dj" data-src="shape.svg" class="iconic" alt="shape" />

        • rt

          <img data-text="rt" data-src="shape.svg" class="iconic" alt="shape" />

        • pj

          <img data-text="pj" data-src="shape.svg" class="iconic" alt="shape" />
        Method name

        Options/Examples

        setShape(shape)

        square
        square-rounded
        hexagon
        octagon
        circle

        setText(text)

        cb
        dj
        rt
        pj

        Icon Font

        Iconic may be all about SVG, but it also comes with a killer font. For the full skinny, read our icon font and Bootstrap/Foundation guides.

        <!-- Default -->
<span class="iconic" data-glyph="shape-square" title="shape square" aria-hidden="true"></span>
<!-- Bootstrap -->
<span class="iconic iconic-shape-square" title="shape square" aria-hidden="true"></span>
<!-- Foundation -->
<span class="fi-shape-square" title="shape square" aria-hidden="true"></span>

        • shape-square

        • shape-square-rounded

        • shape-hexagon

        • shape-octagon

        • shape-circle

        was copied for yah