Способ 1.
С помощью инструмента Font Awesome. Символ рубля входит в набор иконок Font Awesome.
Использовать этот инструмент очень просто: сначала подключаем его к странице. Можно подключить файл стилей из CDN или загрузить его к себе на сайт.
HTML
Теперь можно его использовать. Символ рубля размещается на странице следующим образом:
HTML
Необязательно использовать HTML-элемент <i>
, можно заменить его любым другим на свой вкус, например, элементом <span>
. Управлять размером можно путем добавления к элементам CSS-классов fa-2x
, fa-3x
, fa-4x
, или fa-5x
.
Подробнее об использовании Font Awesome можно почитать на сайте, указанном выше в разделе Get Started.
Способ 2.
С помощью инструмента Web Font Generator на сайте http://www.fontsquirrel.com. За основу нужно взять шрифт, разработанный «Студией Артемия Лебедева». Скачиваем и конвертируем его в разные форматы с помощью Web Font Generator.
Затем размещаем полученные шрифты на своем сайте и подключаем их в CSS-файле.
CSS
Чтобы вставить символ рубля на страницу, добавляем следующий HTML-код:
HTML
Буква внутри элемента <span>
, обозначает каким шрифтом должен быть отображен символ рубля. Ниже представлен список шрифтов и их обозначение.
a — Arial Regular | k — Times Regular |
b — Arial Italic | l — Times Italic |
c — Arial Bold | m — Times Bold |
d — Arial Bold Italic | n — Times BoldItalic |
e — Georgia Regular | o — Lucida Sans |
f — Georgia Italic | p — Lucida Sans Bold |
g — Georgia Bold | q — Verdana Regular |
h — Georgia Bold Italic | r — Verdana Italic |
i — Tahoma Regular | s — Verdana Bold |
j — Tahoma Bold | t — Verdana Bold Italic |
u — Futura | v — Trump Mediaeval |
w — ITC Studio Script |