Icônes

Les icônes, insérées à l’aide du code « icon », découpent le contenu, ajoutent un aspect esthétique ou attirent l’attention. Voir l’aide-mémoire pour les paramètres.

Exemple


    <div id="bocss-icon-bulb" class="bocss-icon bocss-icon__small">
        <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g>
	<path d="M12,3c-0.414,0-0.75-0.336-0.75-0.75v-1.5C11.25,0.336,11.586,0,12,0s0.75,0.336,0.75,0.75v1.5C12.75,2.664,12.414,3,12,3z
		"/>
	<path d="M1.5,12c-0.414,0-0.75-0.336-0.75-0.75S1.086,10.5,1.5,10.5H3c0.414,0,0.75,0.336,0.75,0.75S3.414,12,3,12H1.5z"/>
	<path d="M4.85,5.557c-0.195,0-0.379-0.074-0.52-0.209l-1.1-1.057C2.932,4.004,2.923,3.528,3.209,3.23C3.35,3.084,3.547,3,3.75,3
		C3.945,3,4.129,3.074,4.27,3.209l1.1,1.057C5.514,4.405,5.596,4.592,5.6,4.792c0.004,0.2-0.07,0.39-0.209,0.535
		C5.25,5.473,5.053,5.557,4.85,5.557z"/>
	<path d="M21,12c-0.414,0-0.75-0.336-0.75-0.75S20.586,10.5,21,10.5h1.5c0.414,0,0.75,0.336,0.75,0.75S22.914,12,22.5,12H21z"/>
	<path d="M19.15,5.557c-0.203,0-0.4-0.084-0.541-0.23c-0.287-0.299-0.277-0.774,0.021-1.061l1.1-1.057
		C19.871,3.074,20.055,3,20.25,3c0.203,0,0.4,0.084,0.541,0.23c0.287,0.299,0.277,0.774-0.021,1.061l-1.1,1.057
		C19.529,5.483,19.344,5.557,19.15,5.557z"/>
	<path d="M10.5,24c-1.241,0-2.25-1.009-2.25-2.25v-4.008c-2.319-1.307-3.784-3.832-3.75-6.498c0.071-4.13,3.359-7.421,7.487-7.495
		c4.146,0.073,7.44,3.362,7.513,7.487c0.035,2.67-1.429,5.198-3.75,6.506v4.008c0,1.241-1.009,2.25-2.25,2.25H10.5z M9.75,21.75
		c0,0.414,0.336,0.75,0.75,0.75h3c0.414,0,0.75-0.336,0.75-0.75V21h-4.5V21.75z M14.25,19.5V18h-4.5v1.5H14.25z M14.903,16.5
		c1.913-1.022,3.126-3.068,3.097-5.24c-0.059-3.311-2.7-5.951-6.013-6.01C8.692,5.309,6.057,7.952,6,11.267
		c-0.028,2.167,1.185,4.212,3.097,5.233H9.75v-3H9c-1.241,0-2.25-1.009-2.25-2.25C6.75,10.009,7.759,9,9,9s2.25,1.009,2.25,2.25V12
		h1.5v-0.75C12.75,10.009,13.759,9,15,9s2.25,1.009,2.25,2.25c0,1.241-1.009,2.25-2.25,2.25h-0.75v3H14.903z M12.75,16.5v-3h-1.5v3
		H12.75z M15,12c0.414,0,0.75-0.336,0.75-0.75S15.414,10.5,15,10.5s-0.75,0.336-0.75,0.75V12H15z M9,10.5
		c-0.414,0-0.75,0.336-0.75,0.75S8.586,12,9,12h0.75v-0.75C9.75,10.836,9.414,10.5,9,10.5z"/>
</g>
</svg>

    </div>

Code simplifié


                [Icon icon="bulb" size="small"]
            

Paramètres

Paramètre Valeurs Description
element_id définie par l’utilisateur ID HTML de l’icône
icon définie par l’utilisateur Icône à afficher
image_id définie par l’utilisateur ID d’une image de la Media Library
preview définie par l’utilisateur Pour activer l’aperçu de l’icône
size small, medium, large, full Taille de l’icône; « full » est la valeur par défaut
inline_svg définie par l’utilisateur Pour définir si l’icône doit être alignée
theme rss Pour définir si l’icône doit être alignée avec un groupe l’icônes
title définie par l’utilisateur Indique le titre de l’icône pour faciliter son identification

Banque d’icônes

Tous les choix doivent être soumis à un concepteur de l’équipe.

add
adobe
alarm
alert-circle
alert-diamond
alert-triangle
analytics-bars
angle-brackets
arrow-button-down
arrow-button-left
arrow-button-right
arrow-button-up
arrow-circle-down
arrow-circle-left
arrow-circle-right
arrow-circle-up
arrow-down-1
arrow-down
arrow-left-1
arrow-left
arrow-right-1
arrow-right
arrow-up-1
arrow-up
bank
bitcoin-bubble
bluetooth
book-open
bookmarks-document
bookmarks
briefcase
bubble-question
bubble-typing
bulb
button-pause
button-play
calculator
calendar
cash-briefcase
chat
circle-check
circle-plus
circle-x
cog
conference
copy
cursor
design-board
dislike
document
dollar
empty
eye
graph-stats-ascend
graph-stats-descend
graph-stats
guillemotleft
guillemotright
house
lab-flask-experiment
laptop
left-quote
legal-hammer
like
menu
money-bag-dollar
multiple-users-1
office-desk
office-file-text
paper-edit
pencil
phone
pin
print
qr-code
question-circle
redo
remove
rss-feed
rss-feed2
rss-feed3
saving-safe
screen
search
send-email-2
send-email
share
shop
slider
star
study-book
study-owl
subtract
switch
time
touch-finger
wifi
wrench
Copied!