Создание svg ИКОНКИ с реагированием на наведение Создание svg ИКОНКИ с реагированием на наведение

Создание svg ИКОНКИ с реагированием на наведение

Дата: Пятница, 24.10.2014, 04:48 | Сообщение # 1

Группа: Администраторы

Сообщений: 1530

1. Создаем svg файл иконки.

Рисуем(или берем из шрифта) в Corel значок(текст,картинку)
Сохраняем в формате .svg

2. Открываем svg файл в текстовом редакторе и устанавливаем цвет заливки значка

3. Сохраняем и заливаем на сайт

4. Прописываем html, css, javascript

------------------------------------------------
Пример для редактирования онлайн http://codepen.io/anon/pen/aEJzm

Дата: Пятница, 24.10.2014, 05:08 | Сообщение # 2

Группа: Администраторы

Сообщений: 1530

Готовые SVG иконки социальных сетей от Юкоз

Tandex/Яндекс: http://s42.ucoz.net/.s/img/icon/social/ya.svg

Google+/Гугл+: http://s42.ucoz.net/.s/img/icon/social/gp.svg

VK/Вконтакте: http://s42.ucoz.net/.s/img/icon/social/vk.svg

Facebook/Фэйбук: http://s42.ucoz.net/.s/img/icon/social/fb.svg

CSS код внедренияна сайт:

a.facebook i {
background-image: url("/.s/img/icon/social/fb.svg");
border: 2px solid rgb(60, 89, 159);
}
a.login-with i {
display: inline-block;
background-repeat: no-repeat;
background-size: 70% 55%;
border: medium none;
position: static;
opacity: 1;
border-radius: 16px;
vertical-align: middle;
cursor: pointer;
width: 26px;
height: 26px;
background-color: rgb(255, 255, 255);
background-position: center center;
}

Дата: Вторник, 02.12.2014, 02:48 | Сообщение # 3

Группа: Администраторы

Сообщений: 1530

Простой SVG редактор онлайн

http://graphing.ru/d/

Создание svg ИКОНКИ с реагированием на наведение - Архив