如何更改字符的html按钮中的字体

Question

我不知道这是否可行，我正在寻找一种更改特定字符字体的方法，例如，我要创建此按钮：

文本在CSS中具有“ calibri”字体，如下所示：

input[type="button"]{
  font-family: calibri;
}

最后一个字符需要使用“ icomoon”字体，因此我的HTML应该如下所示：

<input type='button' value="Move to right <span class=icomoon>x</span>" />

但是我认为这是不可能的，其他方式可能是使用soms CSS伪代码，例如:: after或：first-letter，但我无法弄清楚它们。

因此，问题是：是否可以使用CSS更改HTML按钮的最后一个字符？

Answer 1

您可以使用多个font-family，然后考虑使用您要使用的图标的代码。

这里是使用font-awesome的想法：

input[type="button"]{
  font-family: calibri,'Font Awesome 5 Free';
  font-size:20px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<input type='button' value="Move to right &#xf35a;" >

Answer 2

您可以只使用按钮元素，而不是在输入值中插入跨度，

<style>
    .button {
        font-family: "OriginalFont";
    }
    .icomoon {
        font-family: "icomoon"!important;
    }
</style>

<button class="button">
    Move to Right <span class="icomoon">x</span>
</button>