person

API Methods

setGender

Attribute Names

data-gender

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

        Semantic SVG

        data-gender

        Sets gender of the person

        • genderless

          <img data-gender="genderless" data-src="person.svg" class="iconic" alt="person" />
          
        • male

          <img data-gender="male" data-src="person.svg" class="iconic" alt="person" />
          
        • female

          <img data-gender="female" data-src="person.svg" class="iconic" alt="person" />
          
        Method name

        Options/Examples

        setGender(gender)

        genderless
        male
        female

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

        • person-male

        • person-female

        was copied for yah