Emojis in Web Surveys and Web ILPs

If you would like to add Emojis to your Survey/ILP Questions then you need to add a little bit of HTML. 
 
For example, this set of emojis 
 
 
is created by using this html for the "options" within the question
 
<p style='font-size:50px; background-color: #008000'>&#128513;</p>
<p style='font-size:50px; background-color: #BFD641'>&#128578;</p>
<p style='font-size:50px; background-color: #FFDE59'>&#128528;</p>
<p style='font-size:50px; background-color: #FE9900'>&#128577;</p>
<p style='font-size:50px; background-color: #E4080A'>&#128542;</p>
 
Breaking down one of these options
 
<p style='font-size:50px; background-color: #008000'>&#128513;</p>
 
  • wrap your emoji in the <p style=' and </p> which are a paragraph marker and will create spaces between them
  • the font-size:50px; can be changed to make the emjoi larger or smaller
  • background-color: #008000'> will change the colour of the square itself (see below)
  • &#128513; is the actual emoji code (see below)
  • NOTE: The single quotes that are used. Do not user double quotes
You can get a list of emoji styles here - https://www.w3schools.com/charsets/ref_emoji_smileys.asp - and we have been using the Dec (decimal) codes.
 
Background colour codes can be created using this tool - https://www.w3schools.com/colors/colors_picker.asp - use the code that starts with a # and is followed by 6 characters/numbers - e.g. #008000
 
 

Add Feedback