background gradient
s2 - IT photo №27610

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:

chrome g4zwetiz2p 4

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

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

Leave a Reply

Navigation:

Similar

1727598643_ms_ChatGPT_-_Google_Chrome-min - IT photo №28606
6
29 Sept 2024

OpenAI will increase the cost of ChatGPT from $22 to $44.

OpenAI is rapidly shifting toward commercial operations. According to The New York Times, the subscription cost for ChatGPT will rise by 120% over the next five years. The current subscription price is $20, but it will increase to $22 by the end of the month, and within five years, the price will reach $44 per […]

AIНовости
og_og_1556109592271718992-min - IT photo №28058
144 7
28 Sept 2024

How do I create a Google account 2024?

Creating a Google account is the first step towards personal recommendations on YouTube and using Google API. In this article, we will look at how to easily and quickly create your Google account and ensure its security. Why do I need a Google account? A personal Google account provides access to various services, including Gmail, […]

Google
chrome_4M6IiaxBAw-min - IT photo №28035
53 4
30 Nov 2023

How do PT3M21S YouTube API convert to 03:21 time?

When working with the YouTube API v3, there is a list method for the Video category (https://www.googleapis.com/youtube/v3/videos ). When using it, you get an array with a video inside which objects contain data about each video, one of these parameters is “duration” which contains time in PT3M21S format. How do I convert this time to […]

GoogleYouTube
ascii-min - IT photo №28032
3 4
26 Nov 2023

ASCII: Full table of codes 2024

ASCII (American Standard Code for Information Interchange) is a standard character encoding system designed to represent text on a computer. This standard includes various tables reflecting a variety of character categories. In this article, we will look at three important ASCII tables: Control Characters, Printable Characters, and Extended Characters encoded in Win-1251 Cyrillic. Control characters […]

HTMLТексты и символы