15

我正在使用引导程序和字体真棒。在我正在处理的自定义 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>

....

....

这是我正在做的事情。

4

4 回答 4

34

:before您可以通过使用or: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;
}

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

于 2013-08-12T16:28:18.330 回答
6

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

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

另外，请确保您在上述行之后加载了 CSS ，否则您的自定义字体 CSS 将不起作用。

参考：Font Awesome 入门

于 2013-08-12T03:29:40.657 回答
3

Drupal 8 / FontAwesome 5 使用说明

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

将其粘贴到文件中，它是查找搜索块并将值更改为 FontAwesome 图标的 UNICODE 的 PHP 代码。您可以在此链接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 Web 字体，您还可以为图标添加效果（在此处查看更多信息https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta）。你需要导入一个谷歌网络字体，包括你想在 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 浮动效果的类，因此代码现在将向输入添加一个类。有不同的效果可用。因此，只需选择您喜欢的效果，更改字体导入的 CSS 并将下面代码中的值 FONT-EFFECT-3D-FLOAT 更改为 font-effect-WHATEVER_EFFECT_HERE。注意效果仍处于 Beta 阶段，不适用于所有浏览器，因此请在尝试之前阅读此处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';
}
?>
于 2018-04-07T19:45:00.353 回答
0

试试这个方法。在您的 css 文件中更改font-family: FontAwesome为font-family: "FontAwesome";或font-family: 'FontAwesome';. 我用这种方法解决了同样的问题。

于 2019-04-11T09:03:35.637 回答