Scalia

Step 1: Adding your own font icons

1. Find the file "scalia-socials.svg" in folder "fonts" (in Scalia theme) and import this file to https://icomoon.io/app/#/select 

2. Add to the end of this imported set new icons from icomoon, which you wish to have. After that, select all icons and click on "Generate Font"

3. Click on "Codes" and make "Reset codes" beginning from e601

4. Click on "Preferences". Make "Font Name" scalia-socials and click on "Font Download"

Step 2: Updating font file

1. Upload the folder "Fonts" from the zip-file you have downloaded from icomoon in your child theme folder per FTP.

2. Open "style.css" of the child theme and add:

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

If you don't want to use child theme, just replace the existing "scalia-socials" fonts (svg, eot, woff, ttf) in folder "fonts" in Scalia theme with the downloaded ones (it is recommended to make backup of the existing font files before replacing).

Adding social icons in Top Area

1. In functions.php add;

add_action('scalia_print_socials', 'my_scalia_print_socials');
function my_scalia_print_socials() {
?>
<div class="socials-item custom-social-icon-1"><a href="http://link-to-social-1.com" title="Custom social 1">Custom social 1</a></div>
<div class="socials-item custom-social-icon-2"><a href="http://link-to-social-2.com" title="Custom social 2">Custom social 2</a></div>
<div class="socials-item custom-social-icon-3"><a href="http://link-to-social-3.com" title="Custom social 3">Custom social 3</a></div>
<?php
}

in href pls place the URLs you wish to have

2. Enter this custom css in Theme Options - General:

.socials-item.custom-social-icon-1 a:after {
content: '\e609';
}
.socials-item.custom-social-icon-2 a:after {
content: '\e60a';
}
.socials-item.custom-social-icon-3 a:after {
content: '\e603';
}

Adding social icons in footer

1. In functions.php add

add_action('scalia_footer_socials', 'my_scalia_footer_socials');
function my_scalia_footer_socials() {
?>
<div class="socials-item custom-social-icon-1"><a href="http://link-to-social-1.com" title="Custom social 1">Custom social 1</a></div>
<div class="socials-item custom-social-icon-2"><a href="http://link-to-social-2.com" title="Custom social 2">Custom social 2</a></div>
<div class="socials-item custom-social-icon-3"><a href="http://link-to-social-3.com" title="Custom social 3">Custom social 3</a></div>
<?php
}

in href pls place the URLs you wish to have

2. Type in this custom css in Theme Options - General:

.footer-socials-item.custom-social-icon-1 a:after {
content: '\e609';
}
.footer-socials-item.custom-social-icon-2 a:after {
content: '\e60a';
}
.footer-socials-item.custom-social-icon-3 a:after {
content: '\e603';
}