chevron

API Methods

setDirection

Attribute Names

data-direction

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

        Semantic SVG

        data-direction

        Sets the direction of the chevron

        • right

          <img data-direction="right" data-src="chevron.svg" class="iconic" alt="chevron" />

        • top

          <img data-direction="top" data-src="chevron.svg" class="iconic" alt="chevron" />

        • left

          <img data-direction="left" data-src="chevron.svg" class="iconic" alt="chevron" />

        • bottom

          <img data-direction="bottom" data-src="chevron.svg" class="iconic" alt="chevron" />
        Method name

        Options/Examples

        setDirection(direction)

        right
        top
        left
        bottom

        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="chevron-right" title="chevron right" aria-hidden="true"></span>
<!-- Bootstrap -->
<span class="iconic iconic-chevron-right" title="chevron right" aria-hidden="true"></span>
<!-- Foundation -->
<span class="fi-chevron-right" title="chevron right" aria-hidden="true"></span>

        • chevron-right

        • chevron-top

        • chevron-left

        • chevron-bottom

        was copied for yah