Социальные кнопки без картинок

Раньше иконки для соц.кнопок рисовались. В последнее время появилось много штифтов заточенных специально для написания иконок соцсетей.
Ниже я опишу процесс добавления соц.кнопок по шагам , чтобы их мог добавить практически любой.

Для конкретики возьмём тему по умолчанию default из коробочной версии Slaed 6.2. 

Итак

1. Скачиваем файл шрифтов социальных кнопок к себе на компьютер и затем распаковываем в папку  templates/default/fonts/ на сервер вашего сайта.

В итоге получаем папку:

templates/default/fonts/Socicon

а в ней файлы:

Socicon.woff2
Socicon.eot
Socicon.ttf
Socicon.woff
Socicon.svg

Для безопасности добавьте  в неё пустой index.html

2. Теперь займёмся подключением закаченных шрифтов к системе.

2.1  Прописываем шрифты

Открываем файл default/fonts/fonts.css.

По умолчанию там будет такая запись:

@font-face {
font-family: 'Magistral';
src: url('magistralb-wf.eot');
src: url('magistralb-wf.eot?#iefix') format('embedded-opentype'),
url('magistralb-wf.woff') format('woff'),
url('magistralb-wf.ttf') format('truetype'),
url('magistralb-wf.svg#magistralcbold') format('svg');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'Magistral';
src: url('magistralr-wf.eot');
src: url('magistralr-wf.eot?#iefix') format('embedded-opentype'),
url('magistralr-wf.woff') format('woff'),
url('magistralr-wf.ttf') format('truetype'),
url('magistralr-wf.svg#magistralcregular') format('svg');
font-weight: normal;
font-style: normal;
}

После неё  (или перед - не важно) добавляем такое:

@font-face {
font-family: 'Socicon';
src: url("../fonts/Socicon/Socicon.eot");
src: url("../fonts/Socicon/Socicon.eot#iefix") format("embedded-opentype"),
url("../fonts/Socicon/Socicon.woff2") format("woff2"),
url("../fonts/Socicon/Socicon.ttf") format("truetype"),
url("../fonts/Socicon/Socicon.woff") format("woff"),
url("../fonts/Socicon/Socicon.svg#Socicon") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="socicon-"], [class*=" socicon-"] {
font-family: 'Socicon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

Сохраняем. Это основа. Далее идёт опция.

 

2.2. Теперь  прописываем коды нужных соцсетей.

Например, нам нужен vk и ютуб
Снова открываем файл fonts.css   и добавляем ниже следующие строки

.socicon-vkontakte:before { content: "e095"; }
.socicon-youtube:before    {content: "e0a5";  }

Сохраняем файл. Всё! шрифт подключили.

3. Теперь выводим иконки на сайте

Для этого создадим любой тег и присвоим ему необходимый класс, который позволит лицезреть задуманное

пишем, например, такой код 
<span class="socicon socicon-vkontakte"></span>
<h2 style="color: red;" class="socicon socicon-youtube"></h2>
 где vkontakte и youtube метки прописанные выше в стилях. Вы названия можете менять по своему желанию. Главное чтоб и там и там они совпадали. Результат

Вот собственно и всё. Заходим на сайт, жмём ф5 в браузере и любуемся.

 Ниже привожу список всех возможных иконок. По латинскому названию  не сложно будет догадаться какая к чему относится ну или скажем так: нужное найдёте без особых хлопот:

.socicon-augment:before {content: "e908";}
.socicon-bitbucket:before {content: "e909";}
.socicon-fyuse:before {content: "e90a";}
.socicon-yt-gaming:before {content: "e90b";}
.socicon-sketchfab:before {content: "e90c";}
.socicon-mobcrush:before {content: "e90d";}
.socicon-microsoft:before {content: "e90e";}
.socicon-pandora:before {content: "e907";}
.socicon-messenger:before {content: "e906";}
.socicon-gamewisp:before {content: "e905";}
.socicon-bloglovin:before {content: "e904";}
.socicon-tunein:before {content: "e903";}
.socicon-gamejolt:before {content: "e901";}
.socicon-trello:before {content: "e902";}
.socicon-spreadshirt:before {content: "e900";}
.socicon-500px:before {content: "e000";}
.socicon-8tracks:before {content: "e001";}
.socicon-airbnb:before {content: "e002";}
.socicon-alliance:before {content: "e003";}
.socicon-amazon:before {content: "e004";}
.socicon-amplement:before {content: "e005";}
.socicon-android:before {content: "e006";}
.socicon-angellist:before {content: "e007";}
.socicon-apple:before {content: "e008";}
.socicon-appnet:before {content: "e009";}
.socicon-baidu:before {content: "e00a";}
.socicon-bandcamp:before {content: "e00b";}
.socicon-battlenet:before {content: "e00c";}
.socicon-mixer:before {content: "e00d";}
.socicon-bebee:before {content: "e00e";}
.socicon-bebo:before {content: "e00f";}
.socicon-behance:before {content: "e010";}
.socicon-blizzard:before {content: "e011";}
.socicon-blogger:before {content: "e012";}
.socicon-buffer:before {content: "e013";}
.socicon-chrome:before {content: "e014";}
.socicon-coderwall:before {content: "e015";}
.socicon-curse:before {content: "e016";}
.socicon-dailymotion:before {content: "e017";}
.socicon-deezer:before {content: "e018";}
.socicon-delicious:before {content: "e019";}
.socicon-deviantart:before {content: "e01a";}
.socicon-diablo:before {content: "e01b";}
.socicon-digg:before {content: "e01c";}
.socicon-discord:before {content: "e01d";}
.socicon-disqus:before {content: "e01e";}
.socicon-douban:before {content: "e01f";}
.socicon-draugiem:before {content: "e020";}
.socicon-dribbble:before {content: "e021";}
.socicon-drupal:before {content: "e022";}
.socicon-ebay:before {content: "e023";}
.socicon-ello:before {content: "e024";}
.socicon-endomodo:before {content: "e025";}
.socicon-envato:before {content: "e026";}
.socicon-etsy:before {content: "e027";}
.socicon-facebook:before {content: "e028";}
.socicon-feedburner:before {content: "e029";}
.socicon-filmweb:before {content: "e02a";}
.socicon-firefox:before {content: "e02b";}
.socicon-flattr:before {content: "e02c";}
.socicon-flickr:before {content: "e02d";}
.socicon-formulr:before {content: "e02e";}
.socicon-forrst:before {content: "e02f";}
.socicon-foursquare:before {content: "e030";}
.socicon-friendfeed:before {content: "e031";}
.socicon-github:before {content: "e032";}
.socicon-goodreads:before {content: "e033";}
.socicon-google:before {content: "e034";}
.socicon-googlescholar:before {content: "e035";}
.socicon-googlegroups:before {content: "e036";}
.socicon-googlephotos:before {content: "e037";}
.socicon-googleplus:before {content: "e038";}
.socicon-grooveshark:before {content: "e039";}
.socicon-hackerrank:before {content: "e03a";}
.socicon-hearthstone:before {content: "e03b";}
.socicon-hellocoton:before {content: "e03c";}
.socicon-heroes:before {content: "e03d";}
.socicon-hitbox:before {content: "e03e";}
.socicon-horde:before {content: "e03f";}
.socicon-houzz:before {content: "e040";}
.socicon-icq:before {content: "e041";}
.socicon-identica:before {content: "e042";}
.socicon-imdb:before {content: "e043";}
.socicon-instagram:before {content: "e044";}
.socicon-issuu:before {content: "e045";}
.socicon-istock:before {content: "e046";}
.socicon-itunes:before {content: "e047";}
.socicon-keybase:before {content: "e048";}
.socicon-lanyrd:before {content: "e049";}
.socicon-lastfm:before {content: "e04a";}
.socicon-line:before {content: "e04b";}
.socicon-linkedin:before {content: "e04c";}
.socicon-livejournal:before {content: "e04d";}
.socicon-lyft:before {content: "e04e";}
.socicon-macos:before {content: "e04f";}
.socicon-mail:before {content: "e050";}
.socicon-medium:before {content: "e051";}
.socicon-meetup:before {content: "e052";}
.socicon-mixcloud:before {content: "e053";}
.socicon-modelmayhem:before {content: "e054";}
.socicon-mumble:before {content: "e055";}
.socicon-myspace:before {content: "e056";}
.socicon-newsvine:before {content: "e057";}
.socicon-nintendo:before {content: "e058";}
.socicon-npm:before {content: "e059";}
.socicon-odnoklassniki:before {content: "e05a";}
.socicon-openid:before {content: "e05b";}
.socicon-opera:before {content: "e05c";}
.socicon-outlook:before {content: "e05d";}
.socicon-overwatch:before {content: "e05e";}
.socicon-patreon:before {content: "e05f";}
.socicon-paypal:before {content: "e060";}
.socicon-periscope:before {content: "e061";}
.socicon-persona:before {content: "e062";}
.socicon-pinterest:before {content: "e063";}
.socicon-play:before {content: "e064";}
.socicon-player:before {content: "e065";}
.socicon-playstation:before {content: "e066";}
.socicon-pocket:before {content: "e067";}
.socicon-qq:before {content: "e068";}
.socicon-quora:before {content: "e069";}
.socicon-raidcall:before {content: "e06a";}
.socicon-ravelry:before {content: "e06b";}
.socicon-reddit:before {content: "e06c";}
.socicon-renren:before {content: "e06d";}
.socicon-researchgate:before {content: "e06e";}
.socicon-residentadvisor:before {content: "e06f";}
.socicon-reverbnation:before {content: "e070";}
.socicon-rss:before {content: "e071";}
.socicon-sharethis:before {content: "e072";}
.socicon-skype:before {content: "e073";}
.socicon-slideshare:before {content: "e074";}
.socicon-smugmug:before {content: "e075";}
.socicon-snapchat:before {content: "e076";}
.socicon-songkick:before {content: "e077";}
.socicon-soundcloud:before {content: "e078";}
.socicon-spotify:before {content: "e079";}
.socicon-stackexchange:before {content: "e07a";}
.socicon-stackoverflow:before {content: "e07b";}
.socicon-starcraft:before {content: "e07c";}
.socicon-stayfriends:before {content: "e07d";}
.socicon-steam:before {content: "e07e";}
.socicon-storehouse:before {content: "e07f";}
.socicon-strava:before {content: "e080";}
.socicon-streamjar:before {content: "e081";}
.socicon-stumbleupon:before {content: "e082";}
.socicon-swarm:before {content: "e083";}
.socicon-teamspeak:before {content: "e084";}
.socicon-teamviewer:before {content: "e085";}
.socicon-technorati:before {content: "e086";}
.socicon-telegram:before {content: "e087";}
.socicon-tripadvisor:before {content: "e088";}
.socicon-tripit:before {content: "e089";}
.socicon-triplej:before {content: "e08a";}
.socicon-tumblr:before {content: "e08b";}
.socicon-twitch:before {content: "e08c";}
.socicon-twitter:before {content: "e08d";}
.socicon-uber:before {content: "e08e";}
.socicon-ventrilo:before {content: "e08f";}
.socicon-viadeo:before {content: "e090";}
.socicon-viber:before {content: "e091";}
.socicon-viewbug:before {content: "e092";}
.socicon-vimeo:before {content: "e093";}
.socicon-vine:before {content: "e094";}
.socicon-vkontakte:before {content: "e095";}
.socicon-warcraft:before {content: "e096";}
.socicon-wechat:before {content: "e097";}
.socicon-weibo:before {content: "e098";}
.socicon-whatsapp:before {content: "e099";}
.socicon-wikipedia:before {content: "e09a";}
.socicon-windows:before {content: "e09b";}
.socicon-wordpress:before {content: "e09c";}
.socicon-wykop:before {content: "e09d";}
.socicon-xbox:before {content: "e09e";}
.socicon-xing:before {content: "e09f";}
.socicon-yahoo:before {content: "e0a0";}
.socicon-yammer:before {content: "e0a1";}
.socicon-yandex:before {content: "e0a2";}
.socicon-yelp:before {content: "e0a3";}
.socicon-younow:before {content: "e0a4";}
.socicon-youtube:before {content: "e0a5";}
.socicon-zapier:before {content: "e0a6";}
.socicon-zerply:before {content: "e0a7";}
.socicon-zomato:before {content: "e0a8";}
.socicon-zynga:before {content: "e0a9";}