html - chrome窗口中未显示卢比图标

chrome Windows中没有显示卢比图标。我正在使用以下代码，如果做错了请纠正我

我的代码

html

<span class="rupee">
        <input type="text" />
    </span>

的CSS

.rupee {
         position: relative;
     }
     .rupee input {
         padding-left:18px;
     }
     .rupee:before {
         position: absolute;
         top: 0;
         content:"₹";
         left: 5px;
         color:red;
     }

最佳答案

从互联网上下载Web卢比字体和所有字体文件。这些是所有浏览器的需求文件

WebRupee.V2.0.eot,WebRupee.V2.0.ttf,WebRupee.V2.0.woff,WebRupee.V2.0.svg.

并按照以下代码调用字体，并将类赋予任何html标记。
请检查以下示例。

@font-face{font-family:WebRupee;src:url('WebRupee.V2.0.eot');src:local('WebRupee'),url('WebRupee.V2.0.ttf') format('truetype'),url('WebRupee.V2.0.woff') format('woff'),url('WebRupee.V2.0.svg') format('svg');font-weight:normal;font-style:normal;}

.rupee { font-family: WebRupee; }

<span class="rupee">Rs.</span>