卢比图标未显示在镀铬窗口中

Question

卢比图标未显示在镀铬窗口中。我正在使用以下代码，如果我做错了请更正

我的代码

的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;
     }

Answer 1

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

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>

Answer 2

如果您使用字体作为图标，请确保您已包含所有字体扩展名， .eot，.ttf，.svg，.woff

不同的扩展适用于不同的浏览器， 换句话说，你可以使用图像作为卢比标志..

Answer 3

Chrome的一个问题（在Windows 10中）......

下

  

铬：//标志/＃禁用-直写

ENABLE - “禁用 - 直接写入” 然后重新启动浏览器