Question

我正在使用bootstrap和Font Awesome。在我正在研究的自定义css类中，我试图包含Font Awesome图标而不是使用图像。这是Font Awesome之前的代码。

.data .close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../img/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

.next {
  right: 0;
  float: right;
}

.next:hover {
  background: url(../img/next.png) right 48% no-repeat;
}

这是我使用Font Awesome的代码，这显然不起作用。图标不显示。知道我做错了吗？

.data .close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  font-family: FontAwesome
  content: "\f00d";
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}


.next {
  right: 0;
  float: right;
}

.next:hover {
  font-family: FontAwesome
  content: "\f054";
}

html标题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>test</title>
  <link rel="stylesheet" href="./font-awesome/css/font-awesome.css">
</head>

....

....

here is a fiddle of what i'm working on

Answer 1

您可以使用:before或:after伪来完成此操作。在此处详细了解http://astronautweb.co/snippet/font-awesome/

将您的代码更改为此

.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
   text-decoration: none;
}

.lb-prev:before {
    font-family: FontAwesome;
    content: "\f053";
    font-size: 30px;
}

对其他图标执行相同操作。您可能还想调整图标的颜色和高度。无论如何这里是fiddle希望这有帮助

Answer 2

Web字体的精神是尽可能使用缓存，因此您应该在<head></head>之间使用CDN版本而不是自己托管：

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

另外，请确保您在上面的行中加载了CSS AFTER ，否则您的自定义字体CSS将无效。

参考：Font Awesome Get Started

Answer 3

Drupal 8 / FontAwesome 5的说明

创建YOUR_THEME_NAME_HERE.THEME文件并将其放在主题目录中（即your_site_name / themes / your_theme_name）

将其粘贴到文件中，找到搜索块是PHP代码，并将值更改为FontAwesome图标的UNICODE。您可以在此链接https://fontawesome.com/cheatsheet找到其他字符。

<?php
function YOUR_THEME_NAME_HERE_form_search_block_form_alter(&$form, &$form_state) {
  $form['keys']['#attributes']['placeholder'][] = t('Search');
  $form['actions']['submit']['#value'] = html_entity_decode('&#xf002;');
}
?>

打开主题的CSS文件（即your_site_name / themes / your_theme_name / css / styles.css），然后将其粘贴到其中，将所有输入提交文本更改为FontAwesome。如果你还想在输入按钮中添加文本，不知道这是否有效，虽然只是一个图标就可以了。

确保导入FontAwesome，将其添加到CSS文件的顶部

@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');

然后在CSS

中添加它

input#edit-submit {
    font-family: 'Font Awesome\ 5 Free';
    background-color: transparent;
    border: 0;  
}

冲洗所有缓存并使其工作正常

添加Google字体效果

如果您同时使用Google网络字体，也可以添加效果添加到图标（请参阅此处https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta）。您需要导入一个Google Web字体，包括您想首先在CSS中使用的效果，这样就可以

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800&effect=3d-float');
@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');

然后返回到.THEME文件并添加3D Float效果类，以便代码现在将一个类添加到输入中。有不同的效果。因此，只需选择您喜欢的效果，更改字体导入的CSS，并将下面代码中的值FONT-EFFECT-3D-FLOAT更改为font-effect-WHATEVER_EFFECT_HERE。注意效果仍处于测试阶段且不适用于所有浏览器，因此请在尝试之前阅读https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta

<?php
function YOUR_THEME_NAME_HERE_form_search_block_form_alter(&$form, &$form_state) {
  $form['keys']['#attributes']['placeholder'][] = t('Search');
  $form['actions']['submit']['#value'] = html_entity_decode('&#xf002;');
  $form['actions']['submit']['#attributes']['class'][] = 'font-effect-3d-float';
}
?>

Answer 4

尝试这种方式。在您的CSS文件中，将font-family: FontAwesome更改为font-family: "FontAwesome";或font-family: 'FontAwesome';。我已经用这种方法解决了同样的问题。

如何在自己的CSS中使用字体真棒？

4 个答案: