Техническая поддержка «WoT.pw» Среднее время ответа службы поддержки 3 дня, кроме выходных

Форум

ФорумПомогите настроить сайтСмена иконок в теме Goliath

Командующий
Zaurrex
Отправлено 02.06.2015 - 17:24

Глава I - Определяем исходные данные

Начнем с азов. Выделяем нужный нам заголовок с иконкой. В данном случае, это элемент "Menu".

Клик правой кнопкой мыши и находим "Просмотр кода элемента" (если у Вас Google Chrome) или же нажимаем Ctr + Shift + I

Появится меню, как на скриншоте снизу. В нем надо найти элемент ::Before , который будет находится строго НАД искомым заголовком.

Кликаете по этому элементу и появится его CSS код. Он выделен зеленым прямоугольником.

В нем есть строчка типа content: '\E9BB' - это и есть искомый код иконки.

Скриншот - №1

 

 

Глава II - Подбираем иконку

Для того, чтобы подобрать иконку под замену - ее надо выбрать и узнать ее код.

Для этого:

  1. Скачиваем пакет шрифтов IcoMoon
  2. Находим в архиве в папке Font, файл IcoMoon-Free.ttf
  3. Устанавливаем его в систему по двойному клику (не забыв нажать кнопку "Установить" в появившемся окне)
  4. Далее открываем текстовый редактор, для удобства - Word.
  5. Ищем там функцию "Вставить символ"
  6. В появившемся окне находим наш шрифт IcoMoon-Free
  7. В окно подгрузятся иконки.
  8. Выделяя иконку - в нижнем правом углу появится ее код - он нам и нужен. Копируем его куда-нибудь
Скриншот - №2

 UPD. Если кому лениво, у него нет Офиса, или он считает, что офис немного искажает иконки (а так оно и есть)
Предлагаю для скачивания cheatsheet - или по нашему, шпаргалку с кодами в pdf)
Тыкать сюда

UPD2. __JtaG__ считает, что "проще использовать Таблицу символов Windows, там все очень просто, выбираем шрифт и смотрим иконки"

 

Глава III - Заменяем иконку

Имея на руках исходный код и новый, нам надо всего лишь их поменять в CSS.

Для этого дописываем в Ваш CSS cтрочку, дублирующую текущую. (как и что взять написано и нарисовано на Скриншоте - №1)

В свой код вы должны добавить строку аналогичную этой:

Новый код

.modul.subnav .title h3::before {
content: '\E9BB';
top: -2px;
}

Внимание! Код пишется после "\" - не забывайте про него!

Глава IV - Делаем свой блок с иконкой

 

Сообщение отредактировал Zaurrex: 16.06.2015 15:47

S4R.PW

ATAMAH_159
Отправлено 03.06.2015 - 09:07

конечно стоит, я думаю, многим поможет, в том числе и мне :)

Заместитель командующего
NobLe_ExecutioneR
Отправлено 03.06.2015 - 14:10

+

Командующий
Zaurrex
Отправлено 04.06.2015 - 16:44

Ок, напишу неольшой иллюстрированный гайд, будет в шапке)

S4R.PW

SkyAlfa
Отправлено 04.06.2015 - 23:39

Ждемс

Разработчики
Zhenja_Tag
Отправлено 05.06.2015 - 13:46

Zaurrex думаю, что толковый "ман" всегда будет востребован !!!

Командующий
Gta_Brat
Отправлено 05.06.2015 - 17:43

Поддерживаю. Кому-нить все равно пригодится.

Командующий
Zaurrex
Отправлено 11.06.2015 - 14:23

Начал писать статью, потихоньку допилю)

S4R.PW

SHPYRNY
Отправлено 11.06.2015 - 21:00
11.06.2015 - 14:23, Zaurrex написал:

Начал писать статью, потихоньку допилю)

А ссылочку на шрифты оставить?

Связь со мной:

TeamSpeak:  None                        Skype: Shpyrny

ВКонтакте: vk.com                       | Профиль WoT: SHPYRNY

Выходной:  Пятница  |  Суббота

Занимаюсь кастомизацией сайтов. По всем вопросами писать на аккаунты указыные выше.

Командующий
Zaurrex
Отправлено 11.06.2015 - 21:16
11.06.2015 - 21:00, SHPYRNY написал:
11.06.2015 - 14:23, Zaurrex написал:

Начал писать статью, потихоньку допилю)

А ссылочку на шрифты оставить?

На работе писать не удобно)

Но ссылочка будет щас)

https://github.com/Keyamoon/IcoMoon-Free/archive/master.zip

S4R.PW

Good_Luck_VrN
Отправлено 12.06.2015 - 13:53

А как изменить Цвет иконки?

Командующий
Zaurrex
Отправлено 12.06.2015 - 15:47
12.06.2015 - 13:53, Sparco_31 написал:

А как изменить Цвет иконки?

Дождитесь пока допишу)

Или дописывайте в стиль каждой иконки параметр color

___________________
 
.modul.subnav .title h3::before {
  1. content: '\E9BB';
  2. top: -2px;
  3. color: rgb(255, 255, 0);
}

 ___________________

Сообщение отредактировал Zaurrex: 12.06.2015 15:48

S4R.PW

Разработчики
Zhenja_Tag
Отправлено 12.06.2015 - 23:19

Zaurrex Спасибо за старание. Ждём итогового результата. Думаю Разработчики прикрепят тему (если посчитают нужным )

Командующий
Zaurrex
Отправлено 13.06.2015 - 02:58

Такс, работа почти доделана)

Остальное потом)

S4R.PW

__JtaG__
Отправлено 15.06.2015 - 23:12

 

 

 UPD. Если кому лениво, у него нет Офиса, или он считает, что офис немного искажает иконки (а так оно и есть)
Предлагаю для скачивания cheatsheet - или по нашему, шпаргалку с кодами в pdf)

 

А проще использовать Таблицу символов Windows, там все очень просто, выбираем шрифт и смотрим иконки.

Сообщение отредактировал __JtaG__: 15.06.2015 23:14

 

   + 7 925 377 65 45    jtag.wot   Simple.web.d@gmail.com

Командующий
Zaurrex
Отправлено 16.06.2015 - 15:46
15.06.2015 - 23:12, __JtaG__ написал:

 А проще использовать Таблицу символов Windows, там все очень просто, выбираем шрифт и смотрим иконки.

 

Ну собственно я ее через Word и вызывал)

Просто в ворде она чуть более читабельна

Добавлю в описание)

S4R.PW

Офицер по кадрам
PyMaKc
Отправлено 24.07.2015 - 11:16

Вопрос может не по теме, заранее извиняюсь. Как добавить шапки в боковом меню со своим текстом?

Командующий
Zaurrex
Отправлено 24.07.2015 - 12:22

<nav class="modul online"> // Сюда пишется css-класс, если не умете писать свой - оставьте какой-нибудь существующий
<div class="title">
<h3>ТУТ НАЗВАНИЕ</h3>
</div>
ТУТ КОД
</nav>

S4R.PW

__ilya___
Отправлено 12.09.2015 - 16:48

Наш клан поменял иконку клана. А возле аватарки до сих пор старая эмблема клана. Как изменить её на ту что у нас сейчас

Спойлер

 

 

SHPYRNY
Отправлено 12.09.2015 - 17:25
12.09.2015 - 16:48, __ilya___ написал:

Наш клан поменял иконку клана. А возле аватарки до сих пор старая эмблема клана. Как изменить её на ту что у нас сейчас

Спойлер

 

 

При замене вы загружали все файлы?

Всех розрешений.

Если да то подождите пока обновится API варгейминга.

Сообщение отредактировал SHPYRNY: 12.09.2015 17:26

Связь со мной:

TeamSpeak:  None                        Skype: Shpyrny

ВКонтакте: vk.com                       | Профиль WoT: SHPYRNY

Выходной:  Пятница  |  Суббота

Занимаюсь кастомизацией сайтов. По всем вопросами писать на аккаунты указыные выше.

Пожалуйста, авторизируйтесь to post a message,