Zu Hauptinhalten wechseln

FV Decipher Unterstützung

Alle Themen, Ressourcen für FV Decipher benötigt.

 
decipher

Adding Icons from Font Awesome

For more information about Font Awesome, click here.

1:  Overview

From their website, "Font Awesome gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS".

           

For compat level 126+ surveys, Font Awesome 4.2 is loaded into the respondent view and ready to be used in your next question style.

After you have chosen an icon from their website or from the list below, use the icon's name to add it into your survey. For example, replace "NAME" in the following code:

<i class="fa-icon-NAME"/>&nbsp;</i>

e.g. to use the puzzle piece

<i class="fa-icon-puzzle-piece"/>&nbsp;</i>

Instead of "fa-puzzle-piece" (as shown on their website), use "fa-icon-puzzle-piece"

Use the CSS attribute font-size to control how large your icon will appear:

<i class="fa-icon-puzzle-piece" style="font-size: x-large"/>&nbsp;</i>

1.1:  Using Icons in Question Text

In the survey builder, we can add an icon to an element's title, instruction text, row text, column text, etc...

To add the icon, use the "Source code" option and update the text to include the icon using the code above. If you want to use a puzzle piece, then use the code above exactly as it's written. Otherwise, replace "NAME" with the name of your icon.

For example, to add an icon to the following question's instruction text, update the "Source code" with the following:

Instructions go here! <i class="fa-icon-pied-piper-alt" style="font-size: x-large">&nbsp;</i>

fa_sourcecodeeditor.png

 

<radio
  label="Q1"
  uses="atm1d.6">
  <title>Please select one:</title>
  <comment>Instructions go here! <i class="fa-icon-pied-piper-alt" style="font-size: x-large;">&nbsp;</i></comment>
  <row label="r1">Row 1</row>
  <row label="r2">Row 2</row>
  <row label="r3">Row 3</row>
</radio>

The update above produces the following result:

1.2:  Using Icons in Button Select

The Button Select question style (e.g. uses="atm1d.6") can be customized to use any of the Font Awesome 4.2 icons. To change a button's icon, open the XML editor and update the code to use the FIR (Form Image Replacement) attributes below:

 

  • firRadio / firRadioSelected
  • firCheckbox / firCheckboxSelected

 

For example, we can update the example above to use custom Font Awesome icons:

<radio
  label="Q1"
  firRadio="pied-piper-alt"
  firRadioSelected="thumbs-up"
  uses="atm1d.6">
  <title>Please select one:</title>
  <comment>Instructions go here! <i class="fa-icon-pied-piper-alt" style="font-size: x-large;">&nbsp;</i></comment>
  <row label="r1">Row 1</row>
  <row label="r2">Row 2</row>
  <row label="r3">Row 3</row>
</radio>

Using the firRadio and firRadioSelected attributes in the code above, the following result is produced:

Learn more: Use Custom Font Awesome Icons

1.3:  Using Icons in FIR (Form Image Replacement)

To add Font Awesome icons to any question answer option, turn "on" Global FIR and specify firStyle="fontawesome" in any question that you wish to use the icons (or globally in the <survey> element).

For example, we can add Font Awesome icons globally (in the <survey> element) and locally at each question individually:

<?xml version="1.0" encoding="UTF-8"?>
<survey
  ...
  fir="on"
  firSize="25px"
  firColors="#fff,#fff,#7E7E7E,#000"
  firStyle="fontawesome"
  firRadio="pied-piper"
  firRadioSelected="pied-piper-alt"
  firCheckbox="pied-piper"
  firCheckboxSelected="pied-piper-alt">

<samplesources default="0">
    ...
</samplesources>
<suspend/>

<radio
  label="Q1">
  <title>Please select one:</title>
  <comment>Instructions go here! <i class="fa-icon-pied-piper" style="font-size: x-large;"> </i></comment>
  <row label="r1">Row 1</row>
  <row label="r2">Row 2</row>
  <row label="r3">Row 3</row>
</radio>

<checkbox
  label="Q2"
  atleast="1"
  firCheckbox="toggle-off"
  firCheckboxSelected="toggle-on">
  <title>Please select one:</title>
  <comment>Instructions go here! <i class="fa-icon-pied-piper-alt" style="font-size: x-large;"> </i></comment>
  <row label="r1">Row 1</row>
  <row label="r2">Row 2</row>
  <row label="r3">Row 3</row>
</checkbox>

<radio
  label="Q3"
  firRadio="heart-o"
  firRadioSelected="heart"
  firCheckbox="thumbs-o-up"
  firCheckboxSelected="thumbs-up">
  <title>Please select one:</title>
  <comment>Instructions go here! <i class="fa-icon-pied-piper" style="font-size: x-large;"> </i></comment>
  <row label="r1">Row 1</row>
  <row label="r2">Row 2</row>
  <row label="r3">Row 3</row>
</radio>

<checkbox
  label="Q3a"
  atleast="1"
  below="Q3">
  <title>Please select one:</title>
  <comment>Instructions go here! <i class="fa-icon-pied-piper-alt" style="font-size: x-large;"> </i></comment>
  <row label="r1">Row 1</row>
  <row label="r2">Row 2</row>
</checkbox>
</survey>

The survey XML code above produces the following result:

Learn more: Use Custom Font Awesome Icons

2:  Icons

All of the icons can be found on the Font Awesome website.

fontawesome_website_icon.png

When you have found an icon, use the icon's name to add it into your survey.

<i class="fa-icon-bicycle">&nbsp;</i>

or

firCheckbox="bicycle"

  • War dieser Artikel hilfreich?