Как сделать значок рубля на CSS?

В 2013 году Российский рубль получил свой уникальный символ, став одной из последних крупных валют, обладающих собственной символикой.

Как сделать знак рубля в HTML?

Иконку рубля уже добавили во многие шнифты и в HTML коды. Чтобы в html отобразить знак рубля, используйте один из кодов: ₽ или ₽

Этот знак активно используют интернет магазины, банки и прочие сайты связанные с денежными операциями, но не на всех компьютерах поддерживается знак рубля и пользователи видят его таким:

Как сделать знак рубля в CSS3?

Чтобы избежать проблем с отображением рубля, используйте наш код кроссбраузерной иконки рубля. Скопируйте CSS в свой проект и добавьте рубль при помощи HTML разметки <span class="rub">Р</span>

<span>&#8381; </span> // Вариант рубля 1
<span>&#x20bd; </span> // Вариант рубля 2
<span class="rub">Р</span> // Вариант рубля 3

<style>
  .rub{
    margin:0 2px;
    color:inherit;
    position:relative;
  }
  .rub:after{
    content:"";
    position:absolute;
    display:inline-block;
    width:80%;
    height:6%;
    top:auto;
    bottom:25%;
    left:-5%;
    background:#fff;
  }
  .rub:before{
    content:"";
    position:absolute;
    display:inline-block;
    width:20%;
    height:6%;
    top:auto;
    bottom:38%;
    left:-5%;
    background:#fff;
  }
</style>

CSS код рубля полностью адаптивен под разные размеры шрифта, стиль и форму.