Question

修改 font awesome 的 css

2017-06-05

822

javascript jquery html css fonts

我正在使用此文件在我的输入按钮上实现图标

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<input type=button class="submitter" onClick="location.href='../test.htm'" value="&#xf09d; Pre-payment"/>

我的 Css 文件包含以下代码

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

问题是我希望输入按钮值的字体与我的网站一致。不是我的按钮上的“预付款”字样占用了 Font awesome 的字体。如果我删除 Font awesome 并添加我自己的字体系列，图标就不会出现。

有什么建议/想法吗？

我尝试下载 Font awesome css 文件并从它所在的任何网站手动修改它，但我找不到它的副本。

Answer 1

采取另一种方法，不要将 font-awesome 直接分配给输入，而是将其分配为

input[type="button"]:before{ content: 'fontawesomeCode', font-family: FontAwesome }

同时将预付款文本保留在按钮上并与填充对齐。

Answer 2

我不确定您是否可以使用输入元素来实现。但是使用按钮是可能的。以下是两个示例：

1) 在按钮内使用单独的元素（例如 i 或 span 等）作为图标。

<button type="button">
  <i class="fa fa-credit-card" aria-hidden="true"></i> Pre-payment
</button>

2) 使用伪元素，允许您通过 css 对图标进行必要的更改。

<button type="button" class="submitter" onClick="location.href='../test.htm'"/>Pre-payment</button>

<style>
button.submitter:before {
    font-family: FontAwesome;
    content:'\f09d';
    margin-right:4px;
}
</style>

Answer 3

您在错误的位置应用了字体系列。更改字体系列时，它会加载该系列的该部分和所有相关字符映射。因此，如果您想添加图标，只需使用官方 fontawesome 文档中提供的图标即可。此外，由于 <input type="button"> 无法包含任何 html，因此无法在其中包含文本和图标。

我建议使用 <button> 。参考我的观点 <button> vs. <input type="button" />。使用哪一个？

HTML

<button type=button class="submitter" onClick="location.href='../test.htm'">&#xf09d; Pre-payment <i class="required-icon-fontawesome"></i></button>

CSS

button {
    font-family: tahoma, helvetica, sans-serif;;
}