<commit_before><?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<ui:composition template="/applayout/pageTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:b="http://bootsfaces.net/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets">


  <ui:define name="content-navigator">
    <b:listLinks>
      <b:navLink href="#icons" value="Icons" />
      <b:navLink href="#default_icons" value="Default Icons" />
      <b:navLink href="#font_awesome_icon_set" value="Font Awesome Icon set" />
      <b:navLink href="#icon_size" value="Icon Size" />
      <b:navLink href="#rotated_and_flipped_icons" value="Rotated and Flipped Icons" />
      <b:navLink href="#animated_icons" value="Animated Icons" />
      <b:navLink href="#ajax" value="AJAX, JavaScript," />
      <b:navLink href="#configuring_fontawesome" value="Configuring FontAwesome" />
      <b:navLink href="#responsive_design" value="Responsive design" />
      <b:navLink href="#visibility_depending_on_screen_size" value="Visibility depending on screen size" />
      <b:navLink href="#tooltips" value="Tooltips" />
      <b:navLink href="#reference_section" value="Reference section" />
      <b:navLink href="#list_of_font_awesome_icons" value="List of Font Awesome icons" />
    </b:listLinks>
  </ui:define>


  <ui:define name="content">
    <h1><a id="icons">Icons</a></h1>
    <h2><a id="default_icons">Default Icons</a></h2>
    <p>BootsFaces supports the default Icon set of Bootstrap <a href="http://getbootstrap.com/components/#glyphicons-glyphs">Glyphicons</a></p>
    <hr/>

    <p>Using an icon in BootsFaces is very simple: just add a <code>&lt;b:icon&gt;</code> with a <code>value</code> attribute with the icon name (without the trailing <b>glyphicon-</b> prefix).</p>
    <p><b:label severity="warning" text="Changed in 1.2.1" />
    You can also use the attribute <code>name</code>, but we've deprecated it in BootsFaces 1.2.1 in favor of <code>value</code>.</p>
    <p><b:label severity="danger" text="Not available in BootsFaces 2.x" />
    BootsFaces 2.x is based on Bootstrap 4, which, in turn, has dropped support for the Glyphicons. 
    Please considering migrating to one of the icon sets supported by Bootstrap 4. There's no hurry, but updating early saves you a lot of trouble later.</p>

    <b:panel title="Live preview" look="info" collapsible="false">
      <b:icon value="cloud" /> glyphicon-cloud<br/>
      <b:icon value="envelope" /> glyphicon-envelope<br/>
      <b:icon value="pencil" /> glyphicon-pencil<br/>
      <b:icon value="glass" /> glyphicon-glass<br/>
      <f:facet name="footer">
        <strong>JSF markup: </strong>
        <b:panel>
          <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
          <![CDATA[
          <b:icon value="cloud" /> glyphicon-cloud<br/>
          <b:icon value="envelope" /> glyphicon-envelope<br/>
          <b:icon value="pencil" /> glyphicon-pencil<br/>
          <b:icon value="glass" /> glyphicon-glass<br/>
          ]]></script>
        </b:panel>
      </f:facet>
    </b:panel>

    <hr/>
    <p class="text-warning"><b:label severity="warning" text="Changed in version 0.8.1" /> If you are using OmniFaces, read the configuration for the Icons to apply to your Project on the <h:link outcome="/integration/OmniFaces" value="Omnifaces Integration"/> page.</p>

    <h2><a id="font_awesome_icon_set">Font Awesome Icon set</a></h2>
    <p>Since BootsFaces is born to help you design a wonderful website, we recognize that Icons are an important tool to achieve this goal and there are never enough:</p>
    <p>for this reason, BootsFaces now supports the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> Icon set with its 600+ icons.</p>
    <p>As you will see later, we also support most Awesome features, which will work with Glyphicon too!</p>
    <p><b:label severity="warning" text="Changed in 1.2.1" />
    You can also use both <code>name</code> and <code>value</code> to specify the icon, but we've deprecated <code>name</code> in BootsFaces 1.2.1 in favor of <code>value</code>.</p>

    <hr/>

    <b:panel title="Live preview" look="info" collapsible="false">
      <b:iconAwesome value="camera-retro" /> fa-camera-retro<br/>
      <b:iconAwesome value="coffee" /> fa-coffee<br/>
      <b:iconAwesome value="futbol-o" /> fa-futbol-o<br/>
      <b:iconAwesome value="heartbeat" /> fa-heartbeat<br/>
      <b:iconAwesome value="group" /> fa-group<br/>
      <b:iconAwesome value="gamepad" /> fa-gamepad<br/>

      <f:facet name="footer">
        <strong>JSF markup: </strong>
        <b:panel>
          <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
          <![CDATA[
          <b:iconAwesome value="camera-retro" /> fa-camera-retro<br/>
          <b:iconAwesome value="coffee" /> fa-coffee<br/>
          <b:iconAwesome value="futbol-o" /> fa-futbol-o<br/>
          <b:iconAwesome value="heartbeat" /> fa-heartbeat<br/>
          <b:iconAwesome value="group" /> fa-group<br/>
          <b:iconAwesome value="gamepad" /> fa-gamepad
          ]]></script>
        </b:panel>
      </f:facet>
    </b:panel>


    <h2><a id="icon_size">Icon Size</a></h2>
    <p>BootsFaces supports different sizes for the Icons.</p>
    <hr/>

    <p>To increase icon sizes relative to their container, use the <code>size="lg"</code> (33% increase), <code>size="2x"</code>,
    <code>size="3x"</code>, <code>size="4x"</code>, or <code>size="5x"</code> attributes.</p>

    <b:panel title="Live preview" look="info" collapsible="false">
      <b:icon value="globe" size="lg" /> size="lg"<br/>
      <b:icon value="globe" size="2x" /> size="2x"<br/>
      <b:icon value="globe" size="3x" /> size="3x"<br/>
      <b:icon value="globe" size="4x" /> size="4x"<br/>
      <b:icon value="globe" size="5x" /> size="5x"<br/>

      <f:facet name="footer">
        <strong>JSF markup: </strong>
        <b:panel>
          <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
          <![CDATA[
          <b:icon value="globe" size="lg" /> size="lg"<br/>
          <b:icon value="globe" size="2x" /> size="2x"<br/>
          <b:icon value="globe" size="3x" /> size="3x"<br/>
          <b:icon value="globe" size="4x" /> size="4x"<br/>
          <b:icon value="globe" size="5x" /> size="5x"<br/>
          ]]></script>
        </b:panel>
      </f:facet>
    </b:panel>

    <h2><a id="rotated_and_flipped_icons">Rotated and Flipped Icons</a></h2>
    <p>You can also rotate and flip your icons.</p>
    <hr/>

    <p>To rotate or flip your icons, just use the <code>rotate="R"</code>, <code>rotate="L"</code> and <code>flip="H"</code>, <code>flip="V"</code> attributes respectively.</p>

    <b:panel title="Live preview" look="info" collapsible="false">
      <b:iconAwesome value="shield" /> normal<br/>
      <b:iconAwesome value="shield" rotate="R" /> rotate="R" (right - 90 deg.)<br/>
      <b:iconAwesome value="shield" rotate="L" /> rotate="L" (left - 270 deg.)<br/>
      <b:iconAwesome value="shield" flip="H" /> flip="H" (horizontal)<br/>
      <b:iconAwesome value="shield" flip="V" /> flip="V" (vertical)<br/>

      <f:facet name="footer">
        <strong>JSF markup: </strong>
        <b:panel>
          <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
          <![CDATA[
          <b:iconAwesome value="shield" /> normal<br/>
          <b:iconAwesome value="shield" rotate="R" /> rotate="R" (right - 90 deg.)<br/>
          <b:iconAwesome value="shield" rotate="L" /> rotate="L" (left - 270 deg.)<br/>
          <b:iconAwesome value="shield" flip="H" /> flip="H" (horizontal)<br/>
          <b:iconAwesome value="shield" flip="V" /> flip="V" (vertical)
          ]]></script>
        </b:panel>
      </f:facet>
    </b:panel>


    <h2><a id="animated_icons">Animated Icons</a></h2>
    <hr/>

    <p>To let your icons spin, just add the <code>spin="true"</code> attribute.</p>
    <b:panel title="Live preview" look="info" collapsible="false">
      <b:iconAwesome name="spinner" spin="true" size="3x" />#{'   '}
      <b:iconAwesome name="circle-o-notch" spin="true" size="3x" />#{'   '}
      <b:iconAwesome name="refresh" spin="true" size="3x" />#{'   '}
      <b:iconAwesome name="cog" spin="true" size="3x" />

      <f:facet name="footer">
        <strong>JSF markup: </strong>
        <b:panel>
          <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
          <![CDATA[
          <b:iconAwesome name="spinner" spin="true" size="3x" />#{'#'}{'   '}
          <b:iconAwesome name="circle-o-notch" spin="true" size="3x" />#{'#'}{'   '}
          <b:iconAwesome name="refresh" spin="true" size="3x" />#{'#'}{'   '}
          <b:iconAwesome name="cog" spin="true" size="3x" />
          ]]></script>
        </b:panel>
      </f:facet>
    </b:panel>

    <h2><a id="ajax">AJAX, JavaScript,</a><code>disabled</code> and <code>readOnly</code></h2>
    <p>Both icon and iconAwesome can be used with AJAX and/or JavaScript.</p>
    <p>The attributes <code>readonly</code> and <code>disabled</code> prevent AJAX from being executed. Note that JavaScript is not affected - it's executed without checking the state of the widget.
    The difference between <code>readonly</code> and <code>disabled</code> is that <code>disabled</code> grays out the icon.</p>
    <p>This is one of the cases a picture is worth a thousand words. Move the mouse over the spinning icons below, click them, and
    change the checkboxes below to get the idea.</p>

    <b:panel title="Live preview" look="info" collapsible="false">
      <h:form>
        <b:row>
          <b:column col-sm="6">
            <b:panel look="primary" title="AJAXified Gylphicon and Font Awesome icon">
              Glyphicon:
              <b:icon name="globe" size="3x" spin="#{ajaxBean.spinning}" id="glyphicon" disabled="#{ajaxBean.disabled}" readonly="#{ajaxBean.readOnly}"
                      onblur="console.log('blur');ajax:ajaxBean.onBlur()"
                      onfocus="console.log('focus');ajax:ajaxBean.onFocus()"
                      onclick="console.log('click');ajax:ajaxBean.onClick()"
                      ondblclick="console.log('dblclick');ajax:ajaxBean.onDblClick()"
                      onmousedown="console.log('mouse down');ajax:ajaxBean.onMouseDown();"
                      onmousemove="console.log('mouse move');ajax:ajaxBean.onMouseMove();"
                      onmouseout="console.log('mouse out');ajax:ajaxBean.onMouseOut();"
                      onmouseover="console.log('mouse over');ajax:ajaxBean.onMouseOver();"
                      onmouseup="console.log('mouse up');ajax:ajaxBean.onMouseUp();"
                      onmouseselect="console.log('mouse select');ajax:ajaxBean.onMouseSelect();"
                      update="messages" />
              Font Awesome icon:
              <b:iconAwesome name="futbol-o" size="3x" spin="#{ajaxBean.spinning}" disabled="#{ajaxBean.disabled}" readonly="#{ajaxBean.readOnly}" id="fontAwesomeicon"
                             onblur="console.log('blur');ajax:ajaxBean.onBlur()"
                             onfocus="console.log('focus');ajax:ajaxBean.onFocus()"
                             onclick="console.log('click');ajax:ajaxBean.onClick()"
                             ondblclick="console.log('dblclick');ajax:ajaxBean.onDblClick()"
                             onmousedown="console.log('mouse down');ajax:ajaxBean.onMouseDown();"
                             onmousemove="console.log('mouse move');ajax:ajaxBean.onMouseMove();"
                             onmouseout="console.log('mouse out');ajax:ajaxBean.onMouseOut();"
                             onmouseover="console.log('mouse over');ajax:ajaxBean.onMouseOver();"
                             onmouseup="console.log('mouse up');ajax:ajaxBean.onMouseUp();"
                             onmouseselect="console.log('mouse select');ajax:ajaxBean.onMouseSelect();"
                             update="messages" />
              <br />
              <b:selectBooleanCheckbox value="#{ajaxBean.spinning}"
                                       onchange="console.log('before onChange');ajax:ajaxBean.onChange();javascript:console.log('afterOnChange')"
                                       update="messages @form:**:*icon" caption="spinning" />
              <b:selectBooleanCheckbox value="#{ajaxBean.disabled}"
                                       onchange="console.log('before onChange');ajax:ajaxBean.onChange();javascript:console.log('afterOnChange')"
                                       update="messages @form:**:*icon" caption="disabled (gray the icon and disabled AJAX)" />
              <b:selectBooleanCheckbox value="#{ajaxBean.readOnly}"
                                       onchange="console.log('before onChange');ajax:ajaxBean.onChange();javascript:console.log('afterOnChange')"
                                       update="messages @form:**:*icon" caption="readOnly (disabled AJAX, but doesn't gray out the icon)" />
            </b:panel>
          </b:column>
          <b:column col-sm="6">
            <b:well id="messages" style="height:216px;overflow-y:auto">
              Last action:
              <ul>
                <ui:repeat var="message" value="#{ajaxBean.messages}">
                  <li>#{message}</li>
                </ui:repeat>
              </ul>
            </b:well>
          </b:column>
        </b:row>
      </h:form>

      <f:facet name="footer">
        <strong>JSF markup: </strong>
        <b:panel>
          <script type="syntaxhighlighter"
          class="brush: xml; toolbar: false;gutter: false; first-line: 1">
          <![CDATA[
          <h:form>
            <b:row>
              <b:column col-sm="6">
                <b:panel look="primary" title="AJAXified Gylphicon and Font Awesome icon">
                  Glyphicon:
                  <b:icon name="globe" size="3x" spin="&num;{ajaxBean.spinning}" id="glyphicon" disabled="&num;{ajaxBean.disabled}" readonly="&num;{ajaxBean.readOnly}"
                          onblur="console.log('blur');ajax:ajaxBean.onBlur()"
                          onfocus="console.log('focus');ajax:ajaxBean.onFocus()"
                          onclick="console.log('click');ajax:ajaxBean.onClick()"
                          ondblclick="console.log('dblclick');ajax:ajaxBean.onDblClick()"
                          onmousedown="console.log('mouse down');ajax:ajaxBean.onMouseDown();"
                          onmousemove="console.log('mouse move');ajax:ajaxBean.onMouseMove();"
                          onmouseout="console.log('mouse out');ajax:ajaxBean.onMouseOut();"
                          onmouseover="console.log('mouse over');ajax:ajaxBean.onMouseOver();"
                          onmouseup="console.log('mouse up');ajax:ajaxBean.onMouseUp();"
                          onmouseselect="console.log('mouse select');ajax:ajaxBean.onMouseSelect();"
                          update="messages" />
                  Font Awesome icon:
                  <b:iconAwesome name="futbol-o" size="3x" spin="&num;{ajaxBean.spinning}" disabled="&num;{ajaxBean.disabled}" readonly="&num;{ajaxBean.readOnly}" id="fontAwesomeicon"
                                 onblur="console.log('blur');ajax:ajaxBean.onBlur()"
                                 onfocus="console.log('focus');ajax:ajaxBean.onFocus()"
                                 onclick="console.log('click');ajax:ajaxBean.onClick()"
                                 ondblclick="console.log('dblclick');ajax:ajaxBean.onDblClick()"
                                 onmousedown="console.log('mouse down');ajax:ajaxBean.onMouseDown();"
                                 onmousemove="console.log('mouse move');ajax:ajaxBean.onMouseMove();"
                                 onmouseout="console.log('mouse out');ajax:ajaxBean.onMouseOut();"
                                 onmouseover="console.log('mouse over');ajax:ajaxBean.onMouseOver();"
                                 onmouseup="console.log('mouse up');ajax:ajaxBean.onMouseUp();"
                                 onmouseselect="console.log('mouse select');ajax:ajaxBean.onMouseSelect();"
                                 update="messages" />
                  <br />
                  <b:selectBooleanCheckbox value="&num;{ajaxBean.spinning}"
                                           onchange="console.log('before onChange');ajax:ajaxBean.onChange();javascript:console.log('afterOnChange')"
                                           update="messages @form:**:*icon" caption="spinning" />
                  <b:selectBooleanCheckbox value="&num;{ajaxBean.disabled}"
                                           onchange="console.log('before onChange');ajax:ajaxBean.onChange();javascript:console.log('afterOnChange')"
                                           update="messages @form:**:*icon" caption="disabled (gray the icon and disabled AJAX)" />
                  <b:selectBooleanCheckbox value="&num;{ajaxBean.readOnly}"
                                           onchange="console.log('before onChange');ajax:ajaxBean.onChange();javascript:console.log('afterOnChange')"
                                           update="messages @form:**:*icon" caption="readOnly (disabled AJAX, but doesn't gray out the icon)" />
                </b:panel>
              </b:column>
              <b:column col-sm="6">
                <b:well id="messages" style="height:216px;overflow-y:auto">
                  Last action:
                  <ul>
                    <ui:repeat var="message" value="&num;{ajaxBean.messages}">
                      <li>&num;{message}</li>
                    </ui:repeat>
                  </ul>
                </b:well>
              </b:column>
            </b:row>
          </h:form>

          ]]>
          </script>
        </b:panel>
      </f:facet>
    </b:panel>


    <h2><a id="configuring_fontawesome">Configuring FontAwesome</a></h2>
    <p>By default, BootsFaces fetches FontAwesome 4.3.0 from a CDN (from <code>http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css</code>, to be precise).</p>
    <p>If you want to supress the automatical internet access for some reason, you've got several options. You can deactivate it globally in the web.xml, you can
    add a facet to the header of the JSF-view (which allows you to activate and deactivate the feature on a per-page basis) or you can simply include your own
    CSS import. If the file name contains the word <code>font-awesome</code> and ends with <code>.css</code>, BootsFaces won't try to load FontAwesome a second time.
    In most cases that's precisely what you need to do anyways, so you don't have to configure anything to deactivate the defaults.</p>

    <b:tabView>
      <b:tab title="web.xml (global deactivation)">
        <b:panel>
          <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
          <![CDATA[
          <context-param>
          <param-name>net.bootsfaces.get_fontawesome_from_cdn</param-name>
          <param-value>false</param-value>
          </context-param>
          ]]></script>
        </b:panel>
      </b:tab>
      <b:tab title="Header facet">
        <b:panel>
          <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
          <![CDATA[
          <h:head>
          <f:facet name="no-fa">true</f:facet>
          </h:head>
          <h:body>
            ...<commit_msg>TheCoder4eu/BootsFaces-OSP#980 update the version number of Fontawesome<commit_after><?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<ui:composition template="/applayout/pageTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:b="http://bootsfaces.net/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets">


  <ui:define name="content-navigator">
    <b:listLinks>
      <b:navLink href="#icons" value="Icons" />
      <b:navLink href="#default_icons" value="Default Icons" />
      <b:navLink href="#font_awesome_icon_set" value="Font Awesome Icon set" />
      <b:navLink href="#icon_size" value="Icon Size" />
      <b:navLink href="#rotated_and_flipped_icons" value="Rotated and Flipped Icons" />
      <b:navLink href="#animated_icons" value="Animated Icons" />
      <b:navLink href="#ajax" value="AJAX, JavaScript," />
      <b:navLink href="#configuring_fontawesome" value="Configuring FontAwesome" />
      <b:navLink href="#responsive_design" value="Responsive design" />
      <b:navLink href="#visibility_depending_on_screen_size" value="Visibility depending on screen size" />
      <b:navLink href="#tooltips" value="Tooltips" />
      <b:navLink href="#reference_section" value="Reference section" />
      <b:navLink href="#list_of_font_awesome_icons" value="List of Font Awesome icons" />
    </b:listLinks>
  </ui:define>


  <ui:define name="content">
    <h1><a id="icons">Icons</a></h1>
    <h2><a id="default_icons">Default Icons</a></h2>
    <p>BootsFaces supports the default Icon set of Bootstrap <a href="http://getbootstrap.com/components/#glyphicons-glyphs">Glyphicons</a></p>
    <hr/>

    <p>Using an icon in BootsFaces is very simple: just add a <code>&lt;b:icon&gt;</code> with a <code>value</code> attribute with the icon name (without the trailing <b>glyphicon-</b> prefix).</p>
    <p><b:label severity="warning" text="Changed in 1.2.1" />
    You can also use the attribute <code>name</code>, but we've deprecated it in BootsFaces 1.2.1 in favor of <code>value</code>.</p>
    <p><b:label severity="danger" text="Not available in BootsFaces 2.x" />
    BootsFaces 2.x is based on Bootstrap 4, which, in turn, has dropped support for the Glyphicons. 
    Please considering migrating to one of the icon sets supported by Bootstrap 4. There's no hurry, but updating early saves you a lot of trouble later.</p>

    <b:panel title="Live preview" look="info" collapsible="false">
      <b:icon value="cloud" /> glyphicon-cloud<br/>
      <b:icon value="envelope" /> glyphicon-envelope<br/>
      <b:icon value="pencil" /> glyphicon-pencil<br/>
      <b:icon value="glass" /> glyphicon-glass<br/>
      <f:facet name="footer">
        <strong>JSF markup: </strong>
        <b:panel>
          <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
          <![CDATA[
          <b:icon value="cloud" /> glyphicon-cloud<br/>
          <b:icon value="envelope" /> glyphicon-envelope<br/>
          <b:icon value="pencil" /> glyphicon-pencil<br/>
          <b:icon value="glass" /> glyphicon-glass<br/>
          ]]></script>
        </b:panel>
      </f:facet>
    </b:panel>

    <hr/>
    <p class="text-warning"><b:label severity="warning" text="Changed in version 0.8.1" /> If you are using OmniFaces, read the configuration for the Icons to apply to your Project on the <h:link outcome="/integration/OmniFaces" value="Omnifaces Integration"/> page.</p>

    <h2><a id="font_awesome_icon_set">Font Awesome Icon set</a></h2>
    <p>Since BootsFaces is born to help you design a wonderful website, we recognize that Icons are an important tool to achieve this goal and there are never enough:</p>
    <p>for this reason, BootsFaces now supports the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> Icon set with its 600+ icons.</p>
    <p>As you will see later, we also support most Awesome features, which will work with Glyphicon too!</p>
    <p><b:label severity="warning" text="Changed in 1.2.1" />
    You can also use both <code>name</code> and <code>value</code> to specify the icon, but we've deprecated <code>name</code> in BootsFaces 1.2.1 in favor of <code>value</code>.</p>

    <hr/>

    <b:panel title="Live preview" look="info" collapsible="false">
      <b:iconAwesome value="camera-retro" /> fa-camera-retro<br/>
      <b:iconAwesome value="coffee" /> fa-coffee<br/>
      <b:iconAwesome value="futbol-o" /> fa-futbol-o<br/>
      <b:iconAwesome value="heartbeat" /> fa-heartbeat<br/>
      <b:iconAwesome value="group" /> fa-group<br/>
      <b:iconAwesome value="gamepad" /> fa-gamepad<br/>
      <b:iconAwesome value="newspaper-o" /> fa-newspaper-o<br/>

      <f:facet name="footer">
        <strong>JSF markup: </strong>
        <b:panel>
          <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
          <![CDATA[
          <b:iconAwesome value="camera-retro" /> fa-camera-retro<br/>
          <b:iconAwesome value="coffee" /> fa-coffee<br/>
          <b:iconAwesome value="futbol-o" /> fa-futbol-o<br/>
          <b:iconAwesome value="heartbeat" /> fa-heartbeat<br/>
          <b:iconAwesome value="group" /> fa-group<br/>
          <b:iconAwesome value="gamepad" /> fa-gamepad
		  <b:iconAwesome value="newspaper-o" /> fa-newspaper-o<br/>
          ]]></script>
        </b:panel>
      </f:facet>
    </b:panel>


    <h2><a id="icon_size">Icon Size</a></h2>
    <p>BootsFaces supports different sizes for the Icons.</p>
    <hr/>

    <p>To increase icon sizes relative to their container, use the <code>size="lg"</code> (33% increase), <code>size="2x"</code>,
    <code>size="3x"</code>, <code>size="4x"</code>, or <code>size="5x"</code> attributes.</p>

    <b:panel title="Live preview" look="info" collapsible="false">
      <b:icon value="globe" size="lg" /> size="lg"<br/>
      <b:icon value="globe" size="2x" /> size="2x"<br/>
      <b:icon value="globe" size="3x" /> size="3x"<br/>
      <b:icon value="globe" size="4x" /> size="4x"<br/>
      <b:icon value="globe" size="5x" /> size="5x"<br/>

      <f:facet name="footer">
        <strong>JSF markup: </strong>
        <b:panel>
          <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
          <![CDATA[
          <b:icon value="globe" size="lg" /> size="lg"<br/>
          <b:icon value="globe" size="2x" /> size="2x"<br/>
          <b:icon value="globe" size="3x" /> size="3x"<br/>
          <b:icon value="globe" size="4x" /> size="4x"<br/>
          <b:icon value="globe" size="5x" /> size="5x"<br/>
          ]]></script>
        </b:panel>
      </f:facet>
    </b:panel>

    <h2><a id="rotated_and_flipped_icons">Rotated and Flipped Icons</a></h2>
    <p>You can also rotate and flip your icons.</p>
    <hr/>

    <p>To rotate or flip your icons, just use the <code>rotate="R"</code>, <code>rotate="L"</code> and <code>flip="H"</code>, <code>flip="V"</code> attributes respectively.</p>

    <b:panel title="Live preview" look="info" collapsible="false">
      <b:iconAwesome value="shield" /> normal<br/>
      <b:iconAwesome value="shield" rotate="R" /> rotate="R" (right - 90 deg.)<br/>
      <b:iconAwesome value="shield" rotate="L" /> rotate="L" (left - 270 deg.)<br/>
      <b:iconAwesome value="shield" flip="H" /> flip="H" (horizontal)<br/>
      <b:iconAwesome value="shield" flip="V" /> flip="V" (vertical)<br/>

      <f:facet name="footer">
        <strong>JSF markup: </strong>
        <b:panel>
          <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
          <![CDATA[
          <b:iconAwesome value="shield" /> normal<br/>
          <b:iconAwesome value="shield" rotate="R" /> rotate="R" (right - 90 deg.)<br/>
          <b:iconAwesome value="shield" rotate="L" /> rotate="L" (left - 270 deg.)<br/>
          <b:iconAwesome value="shield" flip="H" /> flip="H" (horizontal)<br/>
          <b:iconAwesome value="shield" flip="V" /> flip="V" (vertical)
          ]]></script>
        </b:panel>
      </f:facet>
    </b:panel>


    <h2><a id="animated_icons">Animated Icons</a></h2>
    <hr/>

    <p>To let your icons spin, just add the <code>spin="true"</code> attribute.</p>
    <b:panel title="Live preview" look="info" collapsible="false">
      <b:iconAwesome name="spinner" spin="true" size="3x" />#{'   '}
      <b:iconAwesome name="circle-o-notch" spin="true" size="3x" />#{'   '}
      <b:iconAwesome name="refresh" spin="true" size="3x" />#{'   '}
      <b:iconAwesome name="cog" spin="true" size="3x" />

      <f:facet name="footer">
        <strong>JSF markup: </strong>
        <b:panel>
          <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
          <![CDATA[
          <b:iconAwesome name="spinner" spin="true" size="3x" />#{'#'}{'   '}
          <b:iconAwesome name="circle-o-notch" spin="true" size="3x" />#{'#'}{'   '}
          <b:iconAwesome name="refresh" spin="true" size="3x" />#{'#'}{'   '}
          <b:iconAwesome name="cog" spin="true" size="3x" />
          ]]></script>
        </b:panel>
      </f:facet>
    </b:panel>

    <h2><a id="ajax">AJAX, JavaScript,</a><code>disabled</code> and <code>readOnly</code></h2>
    <p>Both icon and iconAwesome can be used with AJAX and/or JavaScript.</p>
    <p>The attributes <code>readonly</code> and <code>disabled</code> prevent AJAX from being executed. Note that JavaScript is not affected - it's executed without checking the state of the widget.
    The difference between <code>readonly</code> and <code>disabled</code> is that <code>disabled</code> grays out the icon.</p>
    <p>This is one of the cases a picture is worth a thousand words. Move the mouse over the spinning icons below, click them, and
    change the checkboxes below to get the idea.</p>

    <b:panel title="Live preview" look="info" collapsible="false">
      <h:form>
        <b:row>
          <b:column col-sm="6">
            <b:panel look="primary" title="AJAXified Gylphicon and Font Awesome icon">
              Glyphicon:
              <b:icon name="globe" size="3x" spin="#{ajaxBean.spinning}" id="glyphicon" disabled="#{ajaxBean.disabled}" readonly="#{ajaxBean.readOnly}"
                      onblur="console.log('blur');ajax:ajaxBean.onBlur()"
                      onfocus="console.log('focus');ajax:ajaxBean.onFocus()"
                      onclick="console.log('click');ajax:ajaxBean.onClick()"
                      ondblclick="console.log('dblclick');ajax:ajaxBean.onDblClick()"
                      onmousedown="console.log('mouse down');ajax:ajaxBean.onMouseDown();"
                      onmousemove="console.log('mouse move');ajax:ajaxBean.onMouseMove();"
                      onmouseout="console.log('mouse out');ajax:ajaxBean.onMouseOut();"
                      onmouseover="console.log('mouse over');ajax:ajaxBean.onMouseOver();"
                      onmouseup="console.log('mouse up');ajax:ajaxBean.onMouseUp();"
                      onmouseselect="console.log('mouse select');ajax:ajaxBean.onMouseSelect();"
                      update="messages" />
              Font Awesome icon:
              <b:iconAwesome name="futbol-o" size="3x" spin="#{ajaxBean.spinning}" disabled="#{ajaxBean.disabled}" readonly="#{ajaxBean.readOnly}" id="fontAwesomeicon"
                             onblur="console.log('blur');ajax:ajaxBean.onBlur()"
                             onfocus="console.log('focus');ajax:ajaxBean.onFocus()"
                             onclick="console.log('click');ajax:ajaxBean.onClick()"
                             ondblclick="console.log('dblclick');ajax:ajaxBean.onDblClick()"
                             onmousedown="console.log('mouse down');ajax:ajaxBean.onMouseDown();"
                             onmousemove="console.log('mouse move');ajax:ajaxBean.onMouseMove();"
                             onmouseout="console.log('mouse out');ajax:ajaxBean.onMouseOut();"
                             onmouseover="console.log('mouse over');ajax:ajaxBean.onMouseOver();"
                             onmouseup="console.log('mouse up');ajax:ajaxBean.onMouseUp();"
                             onmouseselect="console.log('mouse select');ajax:ajaxBean.onMouseSelect();"
                             update="messages" />
              <br />
              <b:selectBooleanCheckbox value="#{ajaxBean.spinning}"
                                       onchange="console.log('before onChange');ajax:ajaxBean.onChange();javascript:console.log('afterOnChange')"
                                       update="messages @form:**:*icon" caption="spinning" />
              <b:selectBooleanCheckbox value="#{ajaxBean.disabled}"
                                       onchange="console.log('before onChange');ajax:ajaxBean.onChange();javascript:console.log('afterOnChange')"
                                       update="messages @form:**:*icon" caption="disabled (gray the icon and disabled AJAX)" />
              <b:selectBooleanCheckbox value="#{ajaxBean.readOnly}"
                                       onchange="console.log('before onChange');ajax:ajaxBean.onChange();javascript:console.log('afterOnChange')"
                                       update="messages @form:**:*icon" caption="readOnly (disabled AJAX, but doesn't gray out the icon)" />
            </b:panel>
          </b:column>
          <b:column col-sm="6">
            <b:well id="messages" style="height:216px;overflow-y:auto">
              Last action:
              <ul>
                <ui:repeat var="message" value="#{ajaxBean.messages}">
                  <li>#{message}</li>
                </ui:repeat>
              </ul>
            </b:well>
          </b:column>
        </b:row>
      </h:form>

      <f:facet name="footer">
        <strong>JSF markup: </strong>
        <b:panel>
          <script type="syntaxhighlighter"
          class="brush: xml; toolbar: false;gutter: false; first-line: 1">
          <![CDATA[
          <h:form>
            <b:row>
              <b:column col-sm="6">
                <b:panel look="primary" title="AJAXified Gylphicon and Font Awesome icon">
                  Glyphicon:
                  <b:icon name="globe" size="3x" spin="&num;{ajaxBean.spinning}" id="glyphicon" disabled="&num;{ajaxBean.disabled}" readonly="&num;{ajaxBean.readOnly}"
                          onblur="console.log('blur');ajax:ajaxBean.onBlur()"
                          onfocus="console.log('focus');ajax:ajaxBean.onFocus()"
                          onclick="console.log('click');ajax:ajaxBean.onClick()"
                          ondblclick="console.log('dblclick');ajax:ajaxBean.onDblClick()"
                          onmousedown="console.log('mouse down');ajax:ajaxBean.onMouseDown();"
                          onmousemove="console.log('mouse move');ajax:ajaxBean.onMouseMove();"
                          onmouseout="console.log('mouse out');ajax:ajaxBean.onMouseOut();"
                          onmouseover="console.log('mouse over');ajax:ajaxBean.onMouseOver();"
                          onmouseup="console.log('mouse up');ajax:ajaxBean.onMouseUp();"
                          onmouseselect="console.log('mouse select');ajax:ajaxBean.onMouseSelect();"
                          update="messages" />
                  Font Awesome icon:
                  <b:iconAwesome name="futbol-o" size="3x" spin="&num;{ajaxBean.spinning}" disabled="&num;{ajaxBean.disabled}" readonly="&num;{ajaxBean.readOnly}" id="fontAwesomeicon"
                                 onblur="console.log('blur');ajax:ajaxBean.onBlur()"
                                 onfocus="console.log('focus');ajax:ajaxBean.onFocus()"
                                 onclick="console.log('click');ajax:ajaxBean.onClick()"
                                 ondblclick="console.log('dblclick');ajax:ajaxBean.onDblClick()"
                                 onmousedown="console.log('mouse down');ajax:ajaxBean.onMouseDown();"
                                 onmousemove="console.log('mouse move');ajax:ajaxBean.onMouseMove();"
                                 onmouseout="console.log('mouse out');ajax:ajaxBean.onMouseOut();"
                                 onmouseover="console.log('mouse over');ajax:ajaxBean.onMouseOver();"
                                 onmouseup="console.log('mouse up');ajax:ajaxBean.onMouseUp();"
                                 onmouseselect="console.log('mouse select');ajax:ajaxBean.onMouseSelect();"
                                 update="messages" />
                  <br />
                  <b:selectBooleanCheckbox value="&num;{ajaxBean.spinning}"
                                           onchange="console.log('before onChange');ajax:ajaxBean.onChange();javascript:console.log('afterOnChange')"
                                           update="messages @form:**:*icon" caption="spinning" />
                  <b:selectBooleanCheckbox value="&num;{ajaxBean.disabled}"
                                           onchange="console.log('before onChange');ajax:ajaxBean.onChange();javascript:console.log('afterOnChange')"
                                           update="messages @form:**:*icon" caption="disabled (gray the icon and disabled AJAX)" />
                  <b:selectBooleanCheckbox value="&num;{ajaxBean.readOnly}"
                                           onchange="console.log('before onChange');ajax:ajaxBean.onChange();javascript:console.log('afterOnChange')"
                                           update="messages @form:**:*icon" caption="readOnly (disabled AJAX, but doesn't gray out the icon)" />
                </b:panel>
              </b:column>
              <b:column col-sm="6">
                <b:well id="messages" style="height:216px;overflow-y:auto">
                  Last action:
                  <ul>
                    <ui:repeat var="message" value="&num;{ajaxBean.messages}">
                      <li>&num;{message}</li>
                    </ui:repeat>
                  </ul>
                </b:well>
              </b:column>
            </b:row>
          </h:form>

          ]]>
          </script>
        </b:panel>
      </f:facet>
    </b:panel>


    <h2><a id="configuring_fontawesome">Configuring FontAwesome</a></h2>
    <p>By default, BootsFaces fetches FontAwesome 4.7.0 from a CDN (from <code>http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css</code>, to be precise).</p>
    <p>If you want to suppress the automatic web access for some reason, you've got several options. You can deactivate it globally in the web.xml, you can
    add a facet to the header of the JSF-view (which allows you to activate and deactivate the feature on a per-page basis) or you can simply include your own
    CSS import. If the file name contains the word <code>font-awesome</code> and ends with <code>.css</code>, BootsFaces won't try to load FontAwesome a second time.
    In most cases that's precisely what you need to do anyways, so you don't have to configure anything to deactivate the defaults.</p>

    <b:tabView>
      <b:tab title="web.xml (global deactivation)">
        <b:panel>
          <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
          <![CDATA[
          <context-param>
          <param-name>net.bootsfaces.get_fontawesome_from_cdn</param-name>
          <param-value>false</param-value>
          </context-param>
          ]]></script>
        </b:panel>
      </b:tab>
      <b:tab title="Header facet">
        <b:panel>
          <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
          <![CDATA[
          <h:head>
          <f:facet name="no-fa">true</f:facet>
          </h:head>
          <h:body>
            ...
{'fraction_non_alphanumeric': 0.16387360557266165, 'fraction_numerical': 0.005855332895865933, 'mean_word_length': 2.463246219736037, 'pattern_counts': {'":': 0, '<': 781, '<?xml version=': 2, '>': 779, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 32}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 58, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5430998', 'n_tokens_mistral': 12632, 'n_tokens_neox': 11919, 'n_words': 2410}