volume

API Methods

setLevel

Attribute Names

data-level

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

        Semantic SVG

        data-level

        Sets the volume level

        • high

          <img data-level="high" data-src="volume.svg" class="iconic" alt="volume" />
          
        • medium

          <img data-level="medium" data-src="volume.svg" class="iconic" alt="volume" />
          
        • low

          <img data-level="low" data-src="volume.svg" class="iconic" alt="volume" />
          
        • off

          <img data-level="off" data-src="volume.svg" class="iconic" alt="volume" />
          
        Method name

        Options/Examples

        setLevel(level)

        high
        medium
        low
        off

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

        • volume-medium

        • volume-low

        • volume-off

        was copied for yah