时间戳

首页 > 解决方案 > 如何更改字符的html按钮中的字体

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

问题描述

我不知道这是否可能，我正在寻找的是一种更改特定字符字体的方法，例如，我想做这个按钮：

在此处输入图像描述

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

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

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

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

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

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

标签： htmlcssfonts

解决方案

您可以使用多个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;" >

推荐阅读