How do I make a ruble icon on CSS?

In 2013, the Russian ruble received its own unique symbol, becoming one of the last major currencies to have its own symbols.

How do I make a ruble sign in HTML?

The ruble icon has already been added to many pins and HTML codes. To display the ruble sign in html, use one of the following codes: ₽ or ₽

This sign is actively used by online stores, banks and other sites related to monetary transactions, but not all computers support the ruble sign and users see it this way:

How do I make a ruble sign in CSS3?

To avoid problems with displaying the ruble, use our code for the cross-browser ruble icon. Copy CSS to your project and add a ruble using HTML markup

<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>

The CSS code of the ruble is fully adaptive for different font sizes, style and shape.