Using the Boy/Girl Icons
We use the 4 Girl/Boy icons for three reasons on the Learning Commons:
- Interesting or noteworthy piece of information (example).
- For headers to organize content (example).
- To ask questions or communicate directly to the reader (example).
To use the icons, simply paste the following HTML code into the editor box when creating or editing a post or page. You may need to insert a break after the last </div>, epecially if you are using the icons one after the other. You create a break by inserting the tag “<br></br>.”
Blonde Haired Girl
<div class="girl1 girl">
<div class="bubble">
<img class="alignleft size-full wp-image-7322" title="BlondeHaired Girl Icon" src="http://leap.sites.olt.ubc.ca/files/2010/08/BlondeGirl-Icon.png" alt="" width="50" height="55" />
<p><strong>Enter text in here.</strong></p>
</div>
</div>
Blonde Haired Boy
<div class="boy1 boy">
<div class="bubble">
<img class="alignleft size-full wp-image-7321" title="BlondeHaired Boy Icon" src="http://leap.sites.olt.ubc.ca/files/2010/08/BlondeBoy-Icon.png" alt="" width="50" height="55" />
<p><strong>Enter text in here.</strong></p>
</div>
</div>
Dark Haired Girl
<div class="girl2 girl">
<div class="bubble">
<img class="alignright size-full wp-image-7323" title="DarkHaired Girl Icon" src="http://leap.sites.olt.ubc.ca/files/2010/08/DarHairGirl-Icon.png" alt="" width="50" height="55" />
<p><strong>Enter text in here.</strong></p>
</div>
</div>
Dark Hair Boy
<div class="boy2 boy">
<div class="bubble">
<img class="alignright size-full wp-image-7324" title="DarkHaired Boy Icon" src="http://leap.sites.olt.ubc.ca/files/2010/08/DarkHairedBoy-Icon.png" alt="" width="50" height="55" />
<p><strong>Enter text in here.</strong></p>
</div>
</div>