nexus

API Methods

setScreenshot

Attribute Names

data-screenshot

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

        Semantic SVG

        data-screenshot

        The URL of an image to appear in the nexus's screen space. Screenshot images will always fill 100% of the allotted space's width. If you want the screenshot to fit perfectly, use the specified aspect ratios below.

        • URL

          <img data-screenshot="image.png" data-src="nexus.svg" class="iconic" alt="nexus" />
          
        Method name

        Options

        setScreenshot(url)

        Any URL reference to PNG, JPG or GIF file.

        Screenshot sizing

        nexus-sm

        7:12 ratio
        7×12 exact pixels

        nexus-md

        14:25 ratio
        14×25 exact pixels

        nexus-lg

        14:25 ratio
        56×100 exact pixels

        nexus-lg x 2

        14:25 ratio
        112×200 exact pixels

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

        was copied for yah