Как сверстать символ?

@LexShchi · Регистрация: 18.04.2015

Author24 — интернет-сервис помощи студентам

Здравствуйте!
Подскажите, как верстаются символы, подобные символу предшествующему надписи по ссылке :del
Качество плохое, изображение просто маленькое. Но этот символ состоит из 5 квадратных точек.

@ArtSmm · 25.02.2016, 17:53

Привет. Пишет, что картинка не открывается(

@LexShchi · 25.02.2016, 17:59 **[ТС]**

У меня она просто в браузере открывается. Я ни разу еще не выкладывал на форуме изображения, возможно из-за этого проблема и возникла.
Попробую так еще выложить:
Название: кнопка.jpg
Просмотров: 50

Размер: 12.4 Кб

Название: кнопка.jpg
Просмотров: 50

Размер: 12.4 Кб

@ArtSmm · 25.02.2016, 21:02

К сожалению нет. Попробуй прикрепить изображение к самому сообщению. По поводу иконок есть сайт с которого их можно брать, с помощью назначения определенных классов - https://fortawesome.github.io/Font-Awesome/icons/ Его надо подключать к сайту. Если с английским все ок, думаю проблем не будет

@newJS · 26.02.2016, 09:32

Уж очень это похоже на символьный объект, посмотри тут, пост номер 25
Обмен готовыми решениями

@LexShchi · 26.02.2016, 15:35 **[ТС]**

По предложенной ссылке ответа не нашел. Продолжаю поиск...

@newJS · 27.02.2016, 07:00

Сообщение от LexShchi

По предложенной ссылке ответа не нашел.

Там есть предупреждение на счёт разных браузеров.
И это может быть картинка, где это увидеть живьём? саму вёрстку глянуть.

Сообщение от LexShchi

этот символ состоит из 5 квадратных точек.

я вижу шесть точек

@LexShchi · 28.02.2016, 07:44 **[ТС]**

т.е. 6 точек(описался).
Эта кнопочка из бесплатного PSD шаблона с сайта "all-psd.ru"
Вот ссылка на него:https://all-psd.ru/site-templa... lokom.html
Я пробовал и картинкой вставлять(только этот символ), но тогда символ размывается(пробовал png, jpeg,gif)

@newJS · 28.02.2016, 08:03

По ссылке только картинка скачивается, кода нет.

Сообщение от LexShchi

но тогда символ размывается(пробовал png, jpeg,gif

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

@Fedor92 · 28.02.2016, 11:23

LexShchi, как вариант...

Hooge 0853font 2.rar

@newJS · 28.02.2016, 12:53

Да, про шрифты забыли.
Только шрифт нужно грузить пользователю, это нехорошо.
Проги для просмотра шрифтов, каждая свои фишки имеет, так что и вы имейте их обе.

FontExpert
NexusFont

А если у чела уже стоит этот шрифт, браузер всё равно будет грузить, или как?

@LexShchi · 29.02.2016, 14:42 **[ТС]**

Сообщение от Fedor92

LexShchi, как вариант...
Hooge 0853
font 2.rar

Этот вариант я знаю. Но я стремлюсь к максимальному соответствию макету. Дизайнер не зря же так сделал!?

Сообщение от newJS

Проги для просмотра шрифтов, каждая свои фишки имеет, так что и вы имейте их обе.
FontExpert
NexusFont

Спасибо! Взял на вооружение. Про загрузку шрифтов я согласен. Но пока не заморачиваюсь этим, так как изучаю html/css только вторую неделю. Дойду и до них.

@Fedor92 · 29.02.2016, 15:01

Сообщение от LexShchi

Дизайнер не зря же так сделал!?

А в самом макете - это картинка или шрифт? Когда я макет залил он просто не открылся, но зато фотошоп явно указал какие в макете есть шрифты и у меня есть сильное подозрение, что эта загагулина сделана именно кастомным шрифтом, а не картинкой... Но, если всё-таки картинкой - тогда всё очевидно...

И большие очень сомнения, что это спецсимвол - дизайнеры их, как правило не втыкают в шаблон, по крайней мере современные...

@LexShchi · 29.02.2016, 15:09 **[ТС]**

На шаблоне этот символ выполнен картинкой. Шрифты я все загружал, чтоб фотошоп не ругался.

@Fedor92 · 29.02.2016, 15:18

Сообщение от LexShchi

На шаблоне этот символ выполнен картинкой. Шрифты я все загружал, чтоб фотошоп не ругался.

Вот и ответ на Ваш первоначальный тематический вопрос...

Если в макете по задумке дизайнера картинка, то и в шаблоне должна быть картинка(именно в Вашем случае)...

@Krauzer · 29.02.2016, 18:29

Вот в фотошопе шесть пикселей шлепнул

Название: a2e9b5465d4a.png
Просмотров: 24

Размер: 241 байт

@LexShchi · 10.04.2016, 08:47 **[ТС]**

Я решил эту проблему созданием своего шрифта. Возможно не самый лучший вариант, но зато при масштабировании страницы ничего никуда не плывет и не размывается. В шрифте всего один символ: ">". Его вес составляет всего 4,14kb.
Если кому интересно, то для создания шрифта я использовал программу "FontCreator":http://www.high-logic.com/font... eator.html. Нужно всего лишь создать новый проект, выбрать в нем символ, вместо которого должен стоять ваш, щелкнуть по нему 2 раза. Откроется редактор символа. Имеющийся символ удаляете и на его месте рисуете какой хотите.

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	29.02.2016, 15:01	13
	Сообщение от LexShchi Дизайнер не зря же так сделал!? А в самом макете - это картинка или шрифт? Когда я макет залил он просто не открылся, но зато фотошоп явно указал какие в макете есть шрифты и у меня есть сильное подозрение, что эта загагулина сделана именно кастомным шрифтом, а не картинкой... Но, если всё-таки картинкой - тогда всё очевидно... И большие очень сомнения, что это спецсимвол - дизайнеры их, как правило не втыкают в шаблон, по крайней мере современные... 1

@LexShchi 2 / 3 / 2 Регистрация: 18.04.2015 Сообщений: 43
		1
	Как сверстать символ? 25.02.2016, 17:45. Показов 1395. Ответов 16 Метки нет (Все метки) Здравствуйте! Подскажите, как верстаются символы, подобные символу предшествующему надписи по ссылке :del Качество плохое, изображение просто маленькое. Но этот символ состоит из 5 квадратных точек. 0

@ArtSmm 32 / 32 / 2 Регистрация: 07.01.2016 Сообщений: 481
	25.02.2016, 17:53	2
	Привет. Пишет, что картинка не открывается( 1

@LexShchi 2 / 3 / 2 Регистрация: 18.04.2015 Сообщений: 43
	25.02.2016, 17:59 [ТС]	3
	У меня она просто в браузере открывается. Я ни разу еще не выкладывал на форуме изображения, возможно из-за этого проблема и возникла. Попробую так еще выложить: 0

@ArtSmm 32 / 32 / 2 Регистрация: 07.01.2016 Сообщений: 481
	25.02.2016, 21:02	4
	К сожалению нет. Попробуй прикрепить изображение к самому сообщению. По поводу иконок есть сайт с которого их можно брать, с помощью назначения определенных классов - https://fortawesome.github.io/Font-Awesome/icons/ Его надо подключать к сайту. Если с английским все ок, думаю проблем не будет 1

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	26.02.2016, 09:32	5
	Уж очень это похоже на символьный объект, посмотри тут, пост номер 25 Обмен готовыми решениями 1

@LexShchi 2 / 3 / 2 Регистрация: 18.04.2015 Сообщений: 43
	26.02.2016, 15:35 [ТС]	6
	По предложенной ссылке ответа не нашел. Продолжаю поиск... 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	27.02.2016, 07:00	7
	Сообщение от LexShchi По предложенной ссылке ответа не нашел. Там есть предупреждение на счёт разных браузеров. И это может быть картинка, где это увидеть живьём? саму вёрстку глянуть. Сообщение от LexShchi этот символ состоит из 5 квадратных точек. я вижу шесть точек 1

@LexShchi 2 / 3 / 2 Регистрация: 18.04.2015 Сообщений: 43
	28.02.2016, 07:44 [ТС]	8
	т.е. 6 точек(описался). Эта кнопочка из бесплатного PSD шаблона с сайта "all-psd.ru" Вот ссылка на него:https://all-psd.ru/site-templa... lokom.html Я пробовал и картинкой вставлять(только этот символ), но тогда символ размывается(пробовал png, jpeg,gif) 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	28.02.2016, 08:03	9
	Сообщение было отмечено LexShchi как решение Решение По ссылке только картинка скачивается, кода нет. Сообщение от LexShchi но тогда символ размывается(пробовал png, jpeg,gif Раз нет ни чего подходящего в символьных объектах, тогда картинка нужного размера. 1

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	28.02.2016, 12:53	11
	Да, про шрифты забыли. Только шрифт нужно грузить пользователю, это нехорошо. Проги для просмотра шрифтов, каждая свои фишки имеет, так что и вы имейте их обе. FontExpert NexusFont А если у чела уже стоит этот шрифт, браузер всё равно будет грузить, или как? 1

	10.04.2016, 08:47

@LexShchi 2 / 3 / 2 Регистрация: 18.04.2015 Сообщений: 43
	29.02.2016, 14:42 [ТС]	12
	Сообщение от Fedor92 LexShchi, как вариант... Hooge 0853 font 2.rar Этот вариант я знаю. Но я стремлюсь к максимальному соответствию макету. Дизайнер не зря же так сделал!? Сообщение от newJS Проги для просмотра шрифтов, каждая свои фишки имеет, так что и вы имейте их обе. FontExpert NexusFont Спасибо! Взял на вооружение. Про загрузку шрифтов я согласен. Но пока не заморачиваюсь этим, так как изучаю html/css только вторую неделю. Дойду и до них. 0

@LexShchi 2 / 3 / 2 Регистрация: 18.04.2015 Сообщений: 43
	29.02.2016, 15:09 [ТС]	14
	На шаблоне этот символ выполнен картинкой. Шрифты я все загружал, чтоб фотошоп не ругался. 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	29.02.2016, 15:18	15
	Сообщение от LexShchi На шаблоне этот символ выполнен картинкой. Шрифты я все загружал, чтоб фотошоп не ругался. Вот и ответ на Ваш первоначальный тематический вопрос... Если в макете по задумке дизайнера картинка, то и в шаблоне должна быть картинка(именно в Вашем случае)... 1

@Krauzer 6 / 6 / 3 Регистрация: 05.02.2013 Сообщений: 19
	29.02.2016, 18:29	16
	Вот в фотошопе шесть пикселей шлепнул 1

@LexShchi 2 / 3 / 2 Регистрация: 18.04.2015 Сообщений: 43
	10.04.2016, 08:47 [ТС]	17
	Я решил эту проблему созданием своего шрифта. Возможно не самый лучший вариант, но зато при масштабировании страницы ничего никуда не плывет и не размывается. В шрифте всего один символ: ">". Его вес составляет всего 4,14kb. Если кому интересно, то для создания шрифта я использовал программу "FontCreator":http://www.high-logic.com/font... eator.html. Нужно всего лишь создать новый проект, выбрать в нем символ, вместо которого должен стоять ваш, щелкнуть по нему 2 раза. Откроется редактор символа. Имеющийся символ удаляете и на его месте рисуете какой хотите. 0

Как сверстать символ?

Решение