file

API Methods

setFileExtension

Attribute Names

data-file-extension

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

        Semantic SVG

        data-file-extension

        Sets the file extension within the icon

        • svg

          <img data-file-extension="svg" data-src="file.svg" class="iconic" alt="file" />

        • mov

          <img data-file-extension="mov" data-src="file.svg" class="iconic" alt="file" />

        • html

          <img data-file-extension="html" data-src="file.svg" class="iconic" alt="file" />

        • css

          <img data-file-extension="css" data-src="file.svg" class="iconic" alt="file" />

        • ai

          <img data-file-extension="ai" data-src="file.svg" class="iconic" alt="file" />

        • psd

          <img data-file-extension="psd" data-src="file.svg" class="iconic" alt="file" />

        • pdf

          <img data-file-extension="pdf" data-src="file.svg" class="iconic" alt="file" />

        • txt

          <img data-file-extension="txt" data-src="file.svg" class="iconic" alt="file" />

        • png

          <img data-file-extension="png" data-src="file.svg" class="iconic" alt="file" />

        • js

          <img data-file-extension="js" data-src="file.svg" class="iconic" alt="file" />

        • doc

          <img data-file-extension="doc" data-src="file.svg" class="iconic" alt="file" />

        • jpg

          <img data-file-extension="jpg" data-src="file.svg" class="iconic" alt="file" />

        • gif

          <img data-file-extension="gif" data-src="file.svg" class="iconic" alt="file" />

        • xls

          <img data-file-extension="xls" data-src="file.svg" class="iconic" alt="file" />

        • mp3

          <img data-file-extension="mp3" data-src="file.svg" class="iconic" alt="file" />

        • zip

          <img data-file-extension="zip" data-src="file.svg" class="iconic" alt="file" />

        • dmg

          <img data-file-extension="dmg" data-src="file.svg" class="iconic" alt="file" />

        • xml

          <img data-file-extension="xml" data-src="file.svg" class="iconic" alt="file" />

        • json

          <img data-file-extension="json" data-src="file.svg" class="iconic" alt="file" />
        Method name

        Options/Examples

        setFileExtension(fileExtension)

        svg
        mov
        html
        css
        ai
        psd
        pdf
        txt
        png
        js
        doc
        jpg
        gif
        xls
        mp3
        zip
        dmg
        xml
        json

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

        • file-svg

        • file-mov

        • file-html

        • file-css

        • file-ai

        • file-psd

        • file-pdf

        • file-txt

        • file-png

        • file-js

        • file-doc

        • file-jpg

        • file-gif

        • file-xls

        • file-mp3

        • file-zip

        • file-dmg

        • file-xml

        • file-json

        was copied for yah