Вставка стрелок

Встречаются задачи, когда необходимо вставить на сайт стрелки. Наглядный пример — страничная навигация на Яндекс

Есть 2 варианта решения данной задачи:

• использование изображений
• использование спецсимволов (мнемоник) HTML: ← (стрелка вправо) и → (стрелка влево)

Первый вариант тут рассматривать не будем по двум причинам:

1. все очевидно — вырезали картинки, присвоили в фон элементу с помощью background (и даже не думай вставлять стрелки с помощью тега img, стрелка — это элемент оформления)
2. картинки — это дополнительный вес сайта + дополнительные обращения к серверу, потому, где это возможно, старайся избегать их использование

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

Решение

Перебором шрифтов находишь такой, который красиво отобразит стрелку и присваиваешь данному символу этот шрифт. Например, имеем такую структуру кода (возьмём только кнопку "вперёд"):

<span class="navigation"><a href="#">вперёд</a><i><b>Ctrl</b>&rarr;</i></span>

CSS код:

.navigation {
font-family:Arial, Helvetica, sans-serif;
font-size: 15px;
}
.navigation i {
font-family:Times, sans-serif;
}
.navigation i b {
font-family:Arial, Helvetica, sans-serif;
font-weight: normal;
}

В данном примере для навигации используется шрифт Arial, а для стрелки Times.

По теме

• спецсимволы HTML: стрелки