Как добавить иконки социальных сетей

Процесс добавления иконок социальных сетей, скажем честно, сложный, особенно для человека, деятельность которого никак не связана с html и CSS.

Работать мы будем с написанным ниже кодом. Копируйте его внимательно, потому что ошибка в одном знаке приведет к тому, что код работать не будет.

<!–Social Media Icons Start–>
<a href=»https://www.instagram.com/» target=»_blank»><img style=»position:fixed;left:2px;top:210px; width:40px; height:40px;»
src=»https://i.imgur.com/am48AxP.png«_blank»></a>
<a href=»https://twitter.com/» target=»_blank»><img style=»position:fixed;left:2px;top:250px; width:40px; height:40px;»
src=»https://i.imgur.com/lUV7OPV.png«_blank»></a>
<a href=»http://www.facebook.com/» target=»_blank»><img style=»position:fixed;left:2px;top:290px; width:40px; height:40px;»
src=»https://i.imgur.com/Bp3BaIB.png«_blank»></a>
<a href=»https://www.pornhub.com/» target=»_blank»><img style=»position:fixed;left:2px;top:330px; width:40px; height:40px;»
src=»https://i.imgur.com/91vRyoY.png«_blank»></a>
<!–Social Media Icon End–>

Шаг первый

Скопируйте код и вставьте его в Блокнот для удобства дальнейшего редактирования. Поищите в поисковике дизайн иконок социальных сетей, которые вам нравятся. Когда найдете исходное изображение, скачайте его, отредактируйте в графическом редакторе, если необходимо, и загрузите на фотохостинг. Можете использовать imgur.com, imageshack.us, piccy.info или другой сервис.

Шаг второй

Когда отредактированная иконка будет загружена на хостинг, скопируйте ссылку на нее и вставьте в код <img src=»здесь_ссылка_на_изображение»>.

В код <a href=»сайт»> вставьте ссылку на интересующую социальную сеть для перехода мемберов на вашу страничку.

Вставлять ссылки необходимо внутри кавычек:
«здесь_вставляемая_ссылка_на_соцсеть_или_изображение».

Пример:
<a href=»ссылка_на_социальную_сеть»><img src=»ссылка_на_изображение»></a>

Шаг третий

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

Так выглядят данные по умолчанию:
<img style=»position:fixed;left:2px;bottom:465px; width:40px; height:40px;»>

Чтобы изменить расположение иконок, нужно экспериментировать с параметрами:
position — позиционирование элемента на веб-странице (в нашем примере fixed — иконки двигаются по мере прокручивания страницы вверх/вниз. Можно заменить fixed на absolute, и иконки будут закреплены слева. Если поставить static, иконки будут отображены вертикально в поле About me);
left — отступ от левого края браузера;
top — отступ иконки от верха браузера;
width — ширина изображения;
height — высота изображения.

Также на chaturbate есть опция Add new social media (в Bio). С ее помощью можно добавить соцсеть без использования html-кодов.

Шаг четвертый

Скопировать готовый код, вставить его в раздел «Биография» (Bio) на сайте и сохранить изменения (вроде само собой разумеется, а часто из-за невнимательности забывают это сделать).

Итог

В примере, описанном выше, мы рассмотрели добавление иконок twitter, facebook, instagram и pornhub. Если вам не хватает еще каких-то социальных сетей, например, livejournal, myspace и т.д., можете добавить дополнительные иконки. Вы ведь уже в курсе, как и что делать, поэтому данный процесс не вызовет у вас вопросов и сложностей и займет немного времени.