добавить соц иконку

tkid8800

Active Member
Регистрация
13.10.2015
Сообщения
35
Добрый вечер! не пойму где находятся иконки соц сетей

вот список

.icon-gplus:before { content: "\f0d4"; }
.icon-fb:before { content: "\f082"; }
.icon-twitter:before { content: "\f081"; }
.icon-pinterest:before { content: "\f0d3"; }
.icon-youtube:before { content: "\f166"; }
.icon-rss:before { content: "\f143"; }
.icon-instagram:before { content: "\f16d"; }
.icon-behance:before { content: "\f1b4"; }
.icon-dribbble:before { content: "\f17d"; }
.icon-flickr:before { content: "\f16e"; }
.icon-github:before { content: "\f092"; }
.icon-vimeo:before { content: "\f194"; }
.icon-linkedin:before { content: "\f08c"; }

хотел бы добавить еще значок vkontakte , на картинке указаны соц сети.
 

Вложения

tkid8800

Active Member
Регистрация
13.10.2015
Сообщения
35
tkid8800 сказал(а):
Добрый вечер! не пойму где находятся иконки соц сетей

вот список

.icon-gplus:before { content: "\f0d4"; }
.icon-fb:before { content: "\f082"; }
.icon-twitter:before { content: "\f081"; }
.icon-pinterest:before { content: "\f0d3"; }
.icon-youtube:before { content: "\f166"; }
.icon-rss:before { content: "\f143"; }
.icon-instagram:before { content: "\f16d"; }
.icon-behance:before { content: "\f1b4"; }
.icon-dribbble:before { content: "\f17d"; }
.icon-flickr:before { content: "\f16e"; }
.icon-github:before { content: "\f092"; }
.icon-vimeo:before { content: "\f194"; }
.icon-linkedin:before { content: "\f08c"; }

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

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
Иконки реализованы через шрифт.
Надо редактировать шрифт, при чем несколько его форматов.

Самое простое решение будет добавить новую иконку картинкой
Код:
.icon-vk:before {
  content: "";
  display: inline-block;
  background: url("vkicon.png") no-repeat 50% 50%;
  width: 32px;
  height: 32px;
}
Более сложный вариант - воспользоваться, например, сервисом glyphter.com и создать свой шрифт.

Я поступаю так: беру шрифт в SVG, он должен в проекте быть, открываю его в своей IDE (текстом) и закидываю туда новую подготовленную иконку в SVG (новым объектом). Потом просто конвертирую новый SVG шрифт в остальные форматы, через один из следующих сервисов:
http://www.fontconverter.org/ (в последнее время этого хватает)
http://www.freefontconverter.com/
http://www.fontsquirrel.com/ (самый гибкий и мощный и из-за этого неудобный)
 

Zhukanny

Новичок
Регистрация
07.05.2016
Сообщения
1
tkid8800 сказал(а):
Добрый вечер! не пойму где находятся иконки соц сетей

вот список

.icon-gplus:before { content: "\f0d4"; }
.icon-fb:before { content: "\f082"; }
.icon-twitter:before { content: "\f081"; }
.icon-pinterest:before { content: "\f0d3"; }
.icon-youtube:before { content: "\f166"; }
.icon-rss:before { content: "\f143"; }
.icon-instagram:before { content: "\f16d"; }
.icon-behance:before { content: "\f1b4"; }
.icon-dribbble:before { content: "\f17d"; }
.icon-flickr:before { content: "\f16e"; }
.icon-github:before { content: "\f092"; }
.icon-vimeo:before { content: "\f194"; }
.icon-linkedin:before { content: "\f08c"; }

хотел бы добавить еще значок vkontakte , на картинке указаны соц сети.
Столкнулась с такой же проблемой, в списке не было иконки вк.
Решение нашла: на http://fontello.com/ загрузила svg шрифт с иконками, который подключен а моем сайте... иконки отобразились, и среди них оказалась искомая - vk, просто скопировала ее код, \189, в css - и всё)
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
Ради одной иконки подключать громадный шрифт?
Это перебор.
 
Верх Низ