Font Icons
Scalable, multi-color web icons
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
- fullscreen
- exit-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
- arrow-left-2
- arrow-up-2
- arrow-left-3
- arrow-up-3
- arrow-left-4
- arrow-up-4
- arrow-left-5
- arrow-up-5
- arrow-left-6
- arrow-up-6
- arrow-left-7
- arrow-up-7
- arrow-left-8
- arrow-up-8
- pause
- fullscreen-2
- exit-fullscreen-2
- fullscreen-3
- exit-fullscreen-3
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
- pin
- pin-2
- audio
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" /]