Как вставить символ рубля на сайт?

Использовать символ рубля на сайте можно воспользовавшись двумя способами.

Способ 1.

С помощью инструментаFont Awesome. Символ рубля входит в набор иконок Font Awesome.

Использовать этот инструмент очень просто: сначала подключаем его к странице. Можно подключить файл стилей из CDN или загрузить его к себе на сайт.

HTML

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Теперь можно его использовать. Символ рубля размещается на странице следующим образом:

HTML

<i class="fa fa-rub"></i>

Необязательно использовать 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

@font-face {

    font-family: 'rublregular';

    src: url('path/to/fonts/rouble-webfont.eot');

    src: url('path/to/fonts/rouble-webfont.eot?#iefix') format('embedded-opentype'),

         url('path/to/fonts/rouble-webfont.woff2') format('woff2'),

         url('path/to/fonts/rouble-webfont.woff') format('woff'),

         url('path/to/fonts/rouble-webfont.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}

 

.rur {font-family: 'rublregular';}

Чтобы вставить символ рубля на страницу, добавляем следующий HTML-код:

HTML

<p>1500 <span class="rur">a</span><p></p>

Буква внутри элемента <span>, обозначает каким шрифтом должен быть отображен символ рубля. Ниже представлен список шрифтов и их обозначение.

;