Font Icons

Font Icons in Dottoro Studio Theme

Icons are commonly made using images like PNG or GIF across the web. The main drawback of image icons is that every time you want to change the color of an icon, you have to use an image processing program to create a new image.
Fortunately, CSS Web fonts provide an alternative solution for this issue. The main advantage of font icons over image icons is they are scalable (resizable) without loss of quality and their color can easily be changed. Their only real drawback is that they can only be a single color.

Dottoro theme supports two font icon sets by default, but you have the possibility to extend the available icons with your own ones.

DottoroDing

arrow-right
arrow-down-right
arrow-down
arrow-down-left
arrow-left
arrow-up-left
arrow-up
arrow-up-right
arrow-right-2
arrow-down-2
arrow-right-3
arrow-down-3
arrow-right-4
arrow-down-4
arrow-right-5
arrow-down-5
arrow-right-6
arrow-down-6
arrow-right-7
arrow-down-7
arrow-right-8
arrow-down-8
line
line-2
line-3
square
square-wire
square-rounded
square-rounded-wire
rhombus
diamond
diamond-wire
disc
circle
triangle
triangle-wire
star
star-2
star-wire
forbidden
arrow-bended-left

arrow-bended-right
arrow-bended-bottom
arrow-bended-top
refresh
repeat
shuffle
refresh-2
refresh-3
recycle
go-fullscreen
go-back-fullscreen
tag
tag-1
tag-2
tag-3
tag-4
tag-5
paperclip
map
nav
nav-2
nav-3
nav-4
flag
folder
folder-personal
folder-locked
folder-music
magnifier
magnifier-2
magnifier-3
zoom-out
zoom-in
plus
minus
plus-2
minus-2
check
delete
check-disc
delete-disc

info
info-disc
exclamation
exclamation-disc
stop
quote-open
quote-close
quote-open-2
quote-close-2
location-plus
location-minus
location
location-2
marker
marker-2
marker-3
user
user-2
users
users-2
man
woman
man-2
woman-2
man-3
woman-3
v-card
v-card-2
v-card-3
v-card-4
time
time-2
time-3
time-4
time-5
hour-glass
calendar
calendar-2
calendar-3
comment

comment-wire
comment-2
comment-wire-2
comment-3
comment-4
comment-5
comment-6
comment-7
comment-8
comments
comments-wire
comments-2
comments-wire-2
phone
phone-2
phone-3
phone-4
phone-5
phone-6
home
home-2
home-3
email
email-2
email-3
email-4
email-5
email-6
cog
cog-2
cogs
rss
file
file-2
file-3
link
link-2
facebook
twitter
tweet

DottoroDing2

book
book-2
books
books-2
tree
under-construction
umbrella
help
pacman
vault
archive
trash
camera
leaf
sound
sound-2
sound-3
sound-no
bomb
expand
collapse
file-plus
file-delete
file-up
file-down
megaphone
display
presentation
flag
flag-2
flag-finish
finish

podium
cup
ticket
traffic-cone
cloud
cloud-up
cloud-down
eye
heart
bulb
award
stat
stat-2
ribbon
share
bell
shield
flash
locked
unlocked
chart
graph
graph-2
graph-3
list
list-2
list-3
list-4
list-5
tools
inbox
inbox-out

inbox-in
inbox-out-2
inbox-in-2
battery
battery-half
battery-empty
spreadsheet
frames
abacus
ruler
shopping-basket
shopping-basket-2
piggy-bank
shopping-cart
shopping-cart-2
brush
brush-small
pencil
brush-big
cut
settings
settings-2
mobile
mobile-2
picture
picture-2
pictures
movie
movie-2
movie-3
movie-4
file-cabinet

bandaid
globe
globe-2
lab
ice-cream
foot-print
foot-prints
rake-scoop
write
apps
glass
plate
key
key-2
table
chair
plane
truck
truck-2
car
medical-case
suitcase
suitcase-2
bag
purse
colorpicker
mic
mic-2
coverflow
grid
blocks

How to use your own font icons

Create a child theme. See Using Child Themes for details.
Use a @font-face generator (such as Font Squirrel) to create your own font files in eot, svg, svgz, ttf and woff formats.
Upload your font files into a folder under your child theme.

Paste the following CSS code into the style.css file of your child theme:

@font-face {
	font-family: 'MyDing';
	src: url('fonts/my_ding/my_ding.eot');
	src: url('fonts/my_ding/my_ding.eot?#iefix') format('embedded-opentype'), 
		url('fonts/my_ding/my_ding.woff') format('woff'), 
		url('fonts/my_ding/my_ding.ttf') format('truetype'),
		url('fonts/my_ding/my_ding.svgz#MyDingRegular') format('svg'),
		url('fonts/my_ding/my_ding.svg#MyDingRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

*[data-iconset='MyDing']:before, *[data-iconset-after='MyDing']:after {
	font-family: MyDing !Important;
}

	/* the following lines are required for the toggle shortcode */
.toggle_title.open > *[data-iconset-open='MyDing']:before, .toggle_title.closed > *[data-iconset-closed='MyDing']:before {
	font-family: MyDing !Important;
}

and replace the fonts/my_ding/... text with the URL of your font files relative to the location of the style.css file and replace every occurrence of the MyDing text with an arbitrary text. This text will identify your font set.

Paste the following PHP code into the functions.php file of your child theme:
```
add_action ( 'dottoro_iconset_register', 'register_iconset_my_ding' );

function register_iconset_my_ding ()
{
	$icons = array (
		'myicon1' 				=> 'f000',
		'myicon2' 				=> 'f001',
		...
	);
	
	Dottoro_Font_Icons::add_iconset ('MyDing', $icons);
}
```
Be sure to replace the MyDing text with the identifier of your font set. The $chars array describes the available font icons in your font set and must contain name-value pairs. The name (such as myicon1) identifies an icon, the value (e.g. f000) specifies the character code of the icon in hexadecimal format. It is advisable to use the Private Use Area (PUA) for your font icons to ensure font characters are not to read by screen readers.
Your font icons are ready to use. For example:
```
[icon icon="myicon1" iconset="MyDing" /]
```