New icon fonts can be referenced from an online resource, or loaded locally (downloaded to your server).


If the icon font will be referenced from an online resource (e.g. http://weloveiconfonts.com/):


install and activate AirPro child theme;

in child theme, open functions.php and enter the following lines of code: 

add_action( 'wp_enqueue_scripts', 'my_airpro_scripts', 100 );
function my_airpro_scripts() {
    wp_enqueue_style( 'my-theme-icons', 'http://weloveiconfonts.com/api/?family=zocial', false );
}

create the styling for the desired element on page, using an appropriate selector. The styling can be created in Theme Options (WP admin -> Appearance -> Customize -> Additional CSS) or in style.css of the child theme. Example:

.sf-menu.wh-menu-main ul li a
{
  font-family: 'Zocial', sans-serif; font-size:22px;
}
If the icon font has been already downloaded, and will be loaded locally:
  • install and activate AirPro child theme;
  • create a new folder under the child theme folder, e.g. “wp-content\themes\airpro-child\fonts”;
  • save the downloaded files into this folder;
  • in the new folder, create file “my-theme-icons.css”
  • open the file and enter content similar to this (replace “zocial” with the name of your icon font, and also make sure directory paths are correct): 
@charset "UTF-8";
@font-face {
font-family: 'zocial';
font-style: normal;
font-weight: normal;
src: url('../zocial/zocial-regular-webfont.eot');
src: url('../zocial/zocial-regular-webfont.eot?#iefix') format('eot'), 
url('../zocial/zocial-regular-webfont.woff') format('woff'), 
url('../zocial/zocial-regular-webfont.ttf') format('truetype'), 
url('../zocial/zocial-regular-webfont.svg#zocialregular') format('svg');
}
.zocial-acrobat:before{content:"\00E3"}/* some classes removed for brevity */.zocial-youtube:before{content:"U"}


  • open functions.php for the child theme, and add the following lines of code: 
add_action( 'wp_enqueue_scripts', 'my_airpro_scripts', 100 );
function my_airpro_scripts() {
  wp_enqueue_style( 'my-theme-icons', get_stylesheet_directory_uri() . '/fonts/my-theme-icons.css', false );
}


  • again, the styling can be created in Theme Options (WP admin -> Appearance -> Customize -> Additional CSS) or in style.css of the child theme. Example:
.sf-menu.wh-menu-main ul li a
{
  font-family: 'Zocial', sans-serif; font-size:22px;
}