Great plugin, random question
-
Hi,
First of all, this is a great plugin. It’s become one that I use on every site.
Could you point me in the right direction to start using your code to access my own set of icons? Let’s say I’ve made a set of icons for a specific site and I want there to be easy access to those icons in the same way you’ve implemented fontawesome.
Could it be done easily, or am I opening up a can of worms?
Thanks
-
Hi Mike,
Great question – this actually alerted me to an issue in BFA in which some hooks were firing before themes even loaded, which meant that – while plugins could filter in new icons – themes really could’t. This should be fixed with version 1.2.0, which I just release. Okay, so here’s the code you would need to replace Font Awesome with your own custom font, in this example, it’s Typicons:
add_action( 'wp_enqueue_scripts', 'prefix_enqueue_font_styles', 15 ); add_action( 'admin_enqueue_scripts', 'prefix_enqueue_font_styles', 15 ); /** * */ function prefix_enqueue_font_styles() { $stylesheet = get_stylesheet_directory_uri() . '/typicons/src/font/typicons.css'; wp_enqueue_style( 'custom-icon-font', $stylesheet ); } add_filter( 'bfa_icon_list', 'prefix_add_custom_icons' ); /** * Add custom icon array in place of default icons. * * @param array $icons Original icon array. * * @return array $icons Updated array of icons. */ function prefix_add_custom_icons( $icons ) { $icons = array( 'typcn-adjust-brightness' => ' typcn typcn-adjust-brightness', 'typcn-adjust-contrast' => ' typcn typcn-adjust-contrast', 'typcn-anchor-outline' => ' typcn typcn-anchor-outline', 'typcn-anchor' => ' typcn typcn-anchor', 'typcn-archive' => ' typcn typcn-archive', 'typcn-arrow-back-outline' => ' typcn typcn-arrow-back-outline', 'typcn-arrow-back' => ' typcn typcn-arrow-back', 'typcn-arrow-down-outline' => ' typcn typcn-arrow-down-outline', 'typcn-arrow-down-thick' => ' typcn typcn-arrow-down-thick', 'typcn-arrow-down' => ' typcn typcn-arrow-down', 'typcn-arrow-forward-outline' => ' typcn typcn-arrow-forward-outline', 'typcn-arrow-forward' => ' typcn typcn-arrow-forward', 'typcn-arrow-left-outline' => ' typcn typcn-arrow-left-outline', 'typcn-arrow-left-thick' => ' typcn typcn-arrow-left-thick', 'typcn-arrow-left' => ' typcn typcn-arrow-left', 'typcn-arrow-loop-outline' => ' typcn typcn-arrow-loop-outline', 'typcn-arrow-loop' => ' typcn typcn-arrow-loop', 'typcn-arrow-maximise-outline' => ' typcn typcn-arrow-maximise-outline', 'typcn-arrow-maximise' => ' typcn typcn-arrow-maximise', 'typcn-arrow-minimise-outline' => ' typcn typcn-arrow-minimise-outline', 'typcn-arrow-minimise' => ' typcn typcn-arrow-minimise', 'typcn-arrow-move-outline' => ' typcn typcn-arrow-move-outline', 'typcn-arrow-move' => ' typcn typcn-arrow-move', 'typcn-arrow-repeat-outline' => ' typcn typcn-arrow-repeat-outline', 'typcn-arrow-repeat' => ' typcn typcn-arrow-repeat', 'typcn-arrow-right-outline' => ' typcn typcn-arrow-right-outline', 'typcn-arrow-right-thick' => ' typcn typcn-arrow-right-thick', 'typcn-arrow-right' => ' typcn typcn-arrow-right', 'typcn-arrow-shuffle' => ' typcn typcn-arrow-shuffle', 'typcn-arrow-sorted-down' => ' typcn typcn-arrow-sorted-down', 'typcn-arrow-sorted-up' => ' typcn typcn-arrow-sorted-up', 'typcn-arrow-sync-outline' => ' typcn typcn-arrow-sync-outline', 'typcn-arrow-sync' => ' typcn typcn-arrow-sync', 'typcn-arrow-unsorted' => ' typcn typcn-arrow-unsorted', 'typcn-arrow-up-outline' => ' typcn typcn-arrow-up-outline', 'typcn-arrow-up-thick' => ' typcn typcn-arrow-up-thick', 'typcn-arrow-up' => ' typcn typcn-arrow-up', 'typcn-at' => ' typcn typcn-at', 'typcn-attachment-outline' => ' typcn typcn-attachment-outline', 'typcn-attachment' => ' typcn typcn-attachment', 'typcn-backspace-outline' => ' typcn typcn-backspace-outline', 'typcn-backspace' => ' typcn typcn-backspace', 'typcn-battery-charge' => ' typcn typcn-battery-charge', 'typcn-battery-full' => ' typcn typcn-battery-full', 'typcn-battery-high' => ' typcn typcn-battery-high', 'typcn-battery-low' => ' typcn typcn-battery-low', 'typcn-battery-mid' => ' typcn typcn-battery-mid', 'typcn-beaker' => ' typcn typcn-beaker', 'typcn-beer' => ' typcn typcn-beer', 'typcn-bell' => ' typcn typcn-bell', 'typcn-book' => ' typcn typcn-book', 'typcn-bookmark' => ' typcn typcn-bookmark', 'typcn-briefcase' => ' typcn typcn-briefcase', 'typcn-brush' => ' typcn typcn-brush', 'typcn-business-card' => ' typcn typcn-business-card', 'typcn-calculator' => ' typcn typcn-calculator', 'typcn-calendar-outline' => ' typcn typcn-calendar-outline', 'typcn-calendar' => ' typcn typcn-calendar', 'typcn-camera-outline' => ' typcn typcn-camera-outline', 'typcn-camera' => ' typcn typcn-camera', 'typcn-cancel-outline' => ' typcn typcn-cancel-outline', 'typcn-cancel' => ' typcn typcn-cancel', 'typcn-chart-area-outline' => ' typcn typcn-chart-area-outline', 'typcn-chart-area' => ' typcn typcn-chart-area', 'typcn-chart-bar-outline' => ' typcn typcn-chart-bar-outline', 'typcn-chart-bar' => ' typcn typcn-chart-bar', 'typcn-chart-line-outline' => ' typcn typcn-chart-line-outline', 'typcn-chart-line' => ' typcn typcn-chart-line', 'typcn-chart-pie-outline' => ' typcn typcn-chart-pie-outline', 'typcn-chart-pie' => ' typcn typcn-chart-pie', 'typcn-chevron-left-outline' => ' typcn typcn-chevron-left-outline', 'typcn-chevron-left' => ' typcn typcn-chevron-left', 'typcn-chevron-right-outline' => ' typcn typcn-chevron-right-outline', 'typcn-chevron-right' => ' typcn typcn-chevron-right', 'typcn-clipboard' => ' typcn typcn-clipboard', 'typcn-cloud-storage' => ' typcn typcn-cloud-storage', 'typcn-cloud-storage-outline' => ' typcn typcn-cloud-storage-outline', 'typcn-code-outline' => ' typcn typcn-code-outline', 'typcn-code' => ' typcn typcn-code', 'typcn-coffee' => ' typcn typcn-coffee', 'typcn-cog-outline' => ' typcn typcn-cog-outline', 'typcn-cog' => ' typcn typcn-cog', 'typcn-compass' => ' typcn typcn-compass', 'typcn-contacts' => ' typcn typcn-contacts', 'typcn-credit-card' => ' typcn typcn-credit-card', 'typcn-css3' => ' typcn typcn-css3', 'typcn-database' => ' typcn typcn-database', 'typcn-delete-outline' => ' typcn typcn-delete-outline', 'typcn-delete' => ' typcn typcn-delete', 'typcn-device-desktop' => ' typcn typcn-device-desktop', 'typcn-device-laptop' => ' typcn typcn-device-laptop', 'typcn-device-phone' => ' typcn typcn-device-phone', 'typcn-device-tablet' => ' typcn typcn-device-tablet', 'typcn-directions' => ' typcn typcn-directions', 'typcn-divide-outline' => ' typcn typcn-divide-outline', 'typcn-divide' => ' typcn typcn-divide', 'typcn-document-add' => ' typcn typcn-document-add', 'typcn-document-delete' => ' typcn typcn-document-delete', 'typcn-document-text' => ' typcn typcn-document-text', 'typcn-document' => ' typcn typcn-document', 'typcn-download-outline' => ' typcn typcn-download-outline', 'typcn-download' => ' typcn typcn-download', 'typcn-dropbox' => ' typcn typcn-dropbox', 'typcn-edit' => ' typcn typcn-edit', 'typcn-eject-outline' => ' typcn typcn-eject-outline', 'typcn-eject' => ' typcn typcn-eject', 'typcn-equals-outline' => ' typcn typcn-equals-outline', 'typcn-equals' => ' typcn typcn-equals', 'typcn-export-outline' => ' typcn typcn-export-outline', 'typcn-export' => ' typcn typcn-export', 'typcn-eye-outline' => ' typcn typcn-eye-outline', 'typcn-eye' => ' typcn typcn-eye', 'typcn-feather' => ' typcn typcn-feather', 'typcn-film' => ' typcn typcn-film', 'typcn-filter' => ' typcn typcn-filter', 'typcn-flag-outline' => ' typcn typcn-flag-outline', 'typcn-flag' => ' typcn typcn-flag', 'typcn-flash-outline' => ' typcn typcn-flash-outline', 'typcn-flash' => ' typcn typcn-flash', 'typcn-flow-children' => ' typcn typcn-flow-children', 'typcn-flow-merge' => ' typcn typcn-flow-merge', 'typcn-flow-parallel' => ' typcn typcn-flow-parallel', 'typcn-flow-switch' => ' typcn typcn-flow-switch', 'typcn-folder-add' => ' typcn typcn-folder-add', 'typcn-folder-delete' => ' typcn typcn-folder-delete', 'typcn-folder-open' => ' typcn typcn-folder-open', 'typcn-folder' => ' typcn typcn-folder', 'typcn-gift' => ' typcn typcn-gift', 'typcn-globe-outline' => ' typcn typcn-globe-outline', 'typcn-globe' => ' typcn typcn-globe', 'typcn-group-outline' => ' typcn typcn-group-outline', 'typcn-group' => ' typcn typcn-group', 'typcn-headphones' => ' typcn typcn-headphones', 'typcn-heart-full-outline' => ' typcn typcn-heart-full-outline', 'typcn-heart-half-outline' => ' typcn typcn-heart-half-outline', 'typcn-heart-outline' => ' typcn typcn-heart-outline', 'typcn-heart' => ' typcn typcn-heart', 'typcn-home-outline' => ' typcn typcn-home-outline', 'typcn-home' => ' typcn typcn-home', 'typcn-html5' => ' typcn typcn-html5', 'typcn-image-outline' => ' typcn typcn-image-outline', 'typcn-image' => ' typcn typcn-image', 'typcn-infinity-outline' => ' typcn typcn-infinity-outline', 'typcn-infinity' => ' typcn typcn-infinity', 'typcn-info-large-outline' => ' typcn typcn-info-large-outline', 'typcn-info-large' => ' typcn typcn-info-large', 'typcn-info-outline' => ' typcn typcn-info-outline', 'typcn-info' => ' typcn typcn-info', 'typcn-input-checked-outline' => ' typcn typcn-input-checked-outline', 'typcn-input-checked' => ' typcn typcn-input-checked', 'typcn-key-outline' => ' typcn typcn-key-outline', 'typcn-key' => ' typcn typcn-key', 'typcn-keyboard' => ' typcn typcn-keyboard', 'typcn-leaf' => ' typcn typcn-leaf', 'typcn-lightbulb' => ' typcn typcn-lightbulb', 'typcn-link-outline' => ' typcn typcn-link-outline', 'typcn-link' => ' typcn typcn-link', 'typcn-location-arrow-outline' => ' typcn typcn-location-arrow-outline', 'typcn-location-arrow' => ' typcn typcn-location-arrow', 'typcn-location-outline' => ' typcn typcn-location-outline', 'typcn-location' => ' typcn typcn-location', 'typcn-lock-closed-outline' => ' typcn typcn-lock-closed-outline', 'typcn-lock-closed' => ' typcn typcn-lock-closed', 'typcn-lock-open-outline' => ' typcn typcn-lock-open-outline', 'typcn-lock-open' => ' typcn typcn-lock-open', 'typcn-mail' => ' typcn typcn-mail', 'typcn-map' => ' typcn typcn-map', 'typcn-media-eject-outline' => ' typcn typcn-media-eject-outline', 'typcn-media-eject' => ' typcn typcn-media-eject', 'typcn-media-fast-forward-outline' => ' typcn typcn-media-fast-forward-outline', 'typcn-media-fast-forward' => ' typcn typcn-media-fast-forward', 'typcn-media-pause-outline' => ' typcn typcn-media-pause-outline', 'typcn-media-pause' => ' typcn typcn-media-pause', 'typcn-media-play-outline' => ' typcn typcn-media-play-outline', 'typcn-media-play-reverse-outline' => ' typcn typcn-media-play-reverse-outline', 'typcn-media-play-reverse' => ' typcn typcn-media-play-reverse', 'typcn-media-play' => ' typcn typcn-media-play', 'typcn-media-record-outline' => ' typcn typcn-media-record-outline', 'typcn-media-record' => ' typcn typcn-media-record', 'typcn-media-rewind-outline' => ' typcn typcn-media-rewind-outline', 'typcn-media-rewind' => ' typcn typcn-media-rewind', 'typcn-media-stop-outline' => ' typcn typcn-media-stop-outline', 'typcn-media-stop' => ' typcn typcn-media-stop', 'typcn-message-typing' => ' typcn typcn-message-typing', 'typcn-message' => ' typcn typcn-message', 'typcn-messages' => ' typcn typcn-messages', 'typcn-microphone-outline' => ' typcn typcn-microphone-outline', 'typcn-microphone' => ' typcn typcn-microphone', 'typcn-minus-outline' => ' typcn typcn-minus-outline', 'typcn-minus' => ' typcn typcn-minus', 'typcn-mortar-board' => ' typcn typcn-mortar-board', 'typcn-news' => ' typcn typcn-news', 'typcn-notes-outline' => ' typcn typcn-notes-outline', 'typcn-notes' => ' typcn typcn-notes', 'typcn-pen' => ' typcn typcn-pen', 'typcn-pencil' => ' typcn typcn-pencil', 'typcn-phone-outline' => ' typcn typcn-phone-outline', 'typcn-phone' => ' typcn typcn-phone', 'typcn-pi-outline' => ' typcn typcn-pi-outline', 'typcn-pi' => ' typcn typcn-pi', 'typcn-pin-outline' => ' typcn typcn-pin-outline', 'typcn-pin' => ' typcn typcn-pin', 'typcn-pipette' => ' typcn typcn-pipette', 'typcn-plane-outline' => ' typcn typcn-plane-outline', 'typcn-plane' => ' typcn typcn-plane', 'typcn-plug' => ' typcn typcn-plug', 'typcn-plus-outline' => ' typcn typcn-plus-outline', 'typcn-plus' => ' typcn typcn-plus', 'typcn-point-of-interest-outline' => ' typcn typcn-point-of-interest-outline', 'typcn-point-of-interest' => ' typcn typcn-point-of-interest', 'typcn-power-outline' => ' typcn typcn-power-outline', 'typcn-power' => ' typcn typcn-power', 'typcn-printer' => ' typcn typcn-printer', 'typcn-puzzle-outline' => ' typcn typcn-puzzle-outline', 'typcn-puzzle' => ' typcn typcn-puzzle', 'typcn-radar-outline' => ' typcn typcn-radar-outline', 'typcn-radar' => ' typcn typcn-radar', 'typcn-refresh-outline' => ' typcn typcn-refresh-outline', 'typcn-refresh' => ' typcn typcn-refresh', 'typcn-rss-outline' => ' typcn typcn-rss-outline', 'typcn-rss' => ' typcn typcn-rss', 'typcn-scissors-outline' => ' typcn typcn-scissors-outline', 'typcn-scissors' => ' typcn typcn-scissors', 'typcn-shopping-bag' => ' typcn typcn-shopping-bag', 'typcn-shopping-cart' => ' typcn typcn-shopping-cart', 'typcn-social-at-circular' => ' typcn typcn-social-at-circular', 'typcn-social-dribbble-circular' => ' typcn typcn-social-dribbble-circular', 'typcn-social-dribbble' => ' typcn typcn-social-dribbble', 'typcn-social-facebook-circular' => ' typcn typcn-social-facebook-circular', 'typcn-social-facebook' => ' typcn typcn-social-facebook', 'typcn-social-flickr-circular' => ' typcn typcn-social-flickr-circular', 'typcn-social-flickr' => ' typcn typcn-social-flickr', 'typcn-social-github-circular' => ' typcn typcn-social-github-circular', 'typcn-social-github' => ' typcn typcn-social-github', 'typcn-social-google-plus-circular' => ' typcn typcn-social-google-plus-circular', 'typcn-social-google-plus' => ' typcn typcn-social-google-plus', 'typcn-social-instagram-circular' => ' typcn typcn-social-instagram-circular', 'typcn-social-instagram' => ' typcn typcn-social-instagram', 'typcn-social-last-fm-circular' => ' typcn typcn-social-last-fm-circular', 'typcn-social-last-fm' => ' typcn typcn-social-last-fm', 'typcn-social-linkedin-circular' => ' typcn typcn-social-linkedin-circular', 'typcn-social-linkedin' => ' typcn typcn-social-linkedin', 'typcn-social-pinterest-circular' => ' typcn typcn-social-pinterest-circular', 'typcn-social-pinterest' => ' typcn typcn-social-pinterest', 'typcn-social-skype-outline' => ' typcn typcn-social-skype-outline', 'typcn-social-skype' => ' typcn typcn-social-skype', 'typcn-social-tumbler-circular' => ' typcn typcn-social-tumbler-circular', 'typcn-social-tumbler' => ' typcn typcn-social-tumbler', 'typcn-social-twitter-circular' => ' typcn typcn-social-twitter-circular', 'typcn-social-twitter' => ' typcn typcn-social-twitter', 'typcn-social-vimeo-circular' => ' typcn typcn-social-vimeo-circular', 'typcn-social-vimeo' => ' typcn typcn-social-vimeo', 'typcn-social-youtube-circular' => ' typcn typcn-social-youtube-circular', 'typcn-social-youtube' => ' typcn typcn-social-youtube', 'typcn-sort-alphabetically-outline' => ' typcn typcn-sort-alphabetically-outline', 'typcn-sort-alphabetically' => ' typcn typcn-sort-alphabetically', 'typcn-sort-numerically-outline' => ' typcn typcn-sort-numerically-outline', 'typcn-sort-numerically' => ' typcn typcn-sort-numerically', 'typcn-spanner-outline' => ' typcn typcn-spanner-outline', 'typcn-spanner' => ' typcn typcn-spanner', 'typcn-spiral' => ' typcn typcn-spiral', 'typcn-star-full-outline' => ' typcn typcn-star-full-outline', 'typcn-star-half-outline' => ' typcn typcn-star-half-outline', 'typcn-star-half' => ' typcn typcn-star-half', 'typcn-star-outline' => ' typcn typcn-star-outline', 'typcn-star' => ' typcn typcn-star', 'typcn-starburst-outline' => ' typcn typcn-starburst-outline', 'typcn-starburst' => ' typcn typcn-starburst', 'typcn-stopwatch' => ' typcn typcn-stopwatch', 'typcn-support' => ' typcn typcn-support', 'typcn-tabs-outline' => ' typcn typcn-tabs-outline', 'typcn-tag' => ' typcn typcn-tag', 'typcn-tags' => ' typcn typcn-tags', 'typcn-th-large-outline' => ' typcn typcn-th-large-outline', 'typcn-th-large' => ' typcn typcn-th-large', 'typcn-th-list-outline' => ' typcn typcn-th-list-outline', 'typcn-th-list' => ' typcn typcn-th-list', 'typcn-th-menu-outline' => ' typcn typcn-th-menu-outline', 'typcn-th-menu' => ' typcn typcn-th-menu', 'typcn-th-small-outline' => ' typcn typcn-th-small-outline', 'typcn-th-small' => ' typcn typcn-th-small', 'typcn-thermometer' => ' typcn typcn-thermometer', 'typcn-thumbs-down' => ' typcn typcn-thumbs-down', 'typcn-thumbs-ok' => ' typcn typcn-thumbs-ok', 'typcn-thumbs-up' => ' typcn typcn-thumbs-up', 'typcn-tick-outline' => ' typcn typcn-tick-outline', 'typcn-tick' => ' typcn typcn-tick', 'typcn-ticket' => ' typcn typcn-ticket', 'typcn-time' => ' typcn typcn-time', 'typcn-times-outline' => ' typcn typcn-times-outline', 'typcn-times' => ' typcn typcn-times', 'typcn-trash' => ' typcn typcn-trash', 'typcn-tree' => ' typcn typcn-tree', 'typcn-upload-outline' => ' typcn typcn-upload-outline', 'typcn-upload' => ' typcn typcn-upload', 'typcn-user-add-outline' => ' typcn typcn-user-add-outline', 'typcn-user-add' => ' typcn typcn-user-add', 'typcn-user-delete-outline' => ' typcn typcn-user-delete-outline', 'typcn-user-delete' => ' typcn typcn-user-delete', 'typcn-user-outline' => ' typcn typcn-user-outline', 'typcn-user' => ' typcn typcn-user', 'typcn-vendor-android' => ' typcn typcn-vendor-android', 'typcn-vendor-apple' => ' typcn typcn-vendor-apple', 'typcn-vendor-microsoft' => ' typcn typcn-vendor-microsoft', 'typcn-video-outline' => ' typcn typcn-video-outline', 'typcn-video' => ' typcn typcn-video', 'typcn-volume-down' => ' typcn typcn-volume-down', 'typcn-volume-mute' => ' typcn typcn-volume-mute', 'typcn-volume-up' => ' typcn typcn-volume-up', 'typcn-volume' => ' typcn typcn-volume', 'typcn-warning-outline' => ' typcn typcn-warning-outline', 'typcn-warning' => ' typcn typcn-warning', 'typcn-watch' => ' typcn typcn-watch', 'typcn-waves-outline' => ' typcn typcn-waves-outline', 'typcn-waves' => ' typcn typcn-waves', 'typcn-weather-cloudy' => ' typcn typcn-weather-cloudy', 'typcn-weather-downpour' => ' typcn typcn-weather-downpour', 'typcn-weather-night' => ' typcn typcn-weather-night', 'typcn-weather-partly-sunny' => ' typcn typcn-weather-partly-sunny', 'typcn-weather-shower' => ' typcn typcn-weather-shower', 'typcn-weather-snow' => ' typcn typcn-weather-snow', 'typcn-weather-stormy' => ' typcn typcn-weather-stormy', 'typcn-weather-sunny' => ' typcn typcn-weather-sunny', 'typcn-weather-windy-cloudy' => ' typcn typcn-weather-windy-cloudy', 'typcn-weather-windy' => ' typcn typcn-weather-windy', 'typcn-wi-fi-outline' => ' typcn typcn-wi-fi-outline', 'typcn-wi-fi' => ' typcn typcn-wi-fi', 'typcn-wine' => ' typcn typcn-wine', 'typcn-world-outline' => ' typcn typcn-world-outline', 'typcn-world' => ' typcn typcn-world', 'typcn-zoom-in-outline' => ' typcn typcn-zoom-in-outline', 'typcn-zoom-in' => ' typcn typcn-zoom-in', 'typcn-zoom-out-outline' => ' typcn typcn-zoom-out-outline', 'typcn-zoom-out' => ' typcn typcn-zoom-out', 'typcn-zoom-outline' => ' typcn typcn-zoom-outline', 'typcn-zoo' => ' typcn typcn-zoo', ); return $icons; }
A few things to note:
1. You need to include your font’s CSS and actual font files on both the back and front-end (as shown above).
2. When filtering in your font array, the icon’s display name is the array key (left side), and the icon’s CSS class is the value (right side). Make sure to keep an empty space at the beginning of the value, as BFA automatically prepends a prefix to the class and you don’t want your class to go from
typcn typcn-zoom-out
tofa-typcn typcn-zoom-out
Just marking this as resolved!
- The topic ‘Great plugin, random question’ is closed to new replies.