CSS 如何在自己的css中使用字体真棒？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18179098/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to use font awesome in own css?
提问by user2636556
I'm using bootstrap and Font Awesome. In a custom css class I'm working on I tried to include Font Awesome icons instead of using images. Here is my code before 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;
}
Here is my code using Font Awesome, which obviously doesn't work. The icons don't show. Any idea what I'm doing wrong?
这是我使用 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 header
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>
....
....
回答by da-hype
you can do so by using the :beforeor :afterpseudo. read more about it here http://astronautweb.co/snippet/font-awesome/
您可以通过使用:before或:after伪来实现。在此处阅读更多相关信息http://astronautweb.co/snippet/font-awesome/
change your code to this
将您的代码更改为此
.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;
}
do the same for the other icons. you might want to adjust the color and height of the icons too. anyway here is the fiddlehope this helps
对其他图标做同样的事情。您可能还想调整图标的颜色和高度。无论如何，这是小提琴希望这会有所帮助
回答by Raptor
The spirit of Web font is to use cache as much as possible, therefore you should use CDN version between <head></head>instead of hosting yourself:
Web 字体的精神是尽可能使用缓存，因此您应该在两者之间使用 CDN 版本，<head></head>而不是自己托管：
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
Also, make sure you loaded your CSS AFTERthe above line, or your custom font CSS won't work.
另外，请确保在上述行之后加载了 CSS ，否则您的自定义字体 CSS 将不起作用。
Reference: Font Awesome Get Started
回答by Nicholas Simon Cronwright
Instructions for Drupal 8 / FontAwesome 5
Drupal 8 / FontAwesome 5 使用说明
Create a YOUR_THEME_NAME_HERE.THEME file and place it in your themes directory (ie. your_site_name/themes/your_theme_name)
创建一个 YOUR_THEME_NAME_HERE.THEME 文件并将其放在您的主题目录中（即 your_site_name/themes/your_theme_name）
Paste this into the file, it is PHP code to find the Search Block and change the value to the UNICODE for the FontAwesome icon. You can find other characters at this link https://fontawesome.com/cheatsheet.
将此粘贴到文件中，它是用于查找搜索块并将值更改为 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('');
}
?>
Open the CSS file of your theme (ie. your_site_name/themes/your_theme_name/css/styles.css) and then paste this in which will change all input submit text to FontAwesome. Not sure if this will work if you also want to add text in the input button though for just an icon it is fine.
打开主题的 CSS 文件（即 your_site_name/themes/your_theme_name/css/styles.css），然后将其粘贴到其中，将所有输入提交文本更改为 FontAwesome。如果您还想在输入按钮中添加文本，则不确定这是否可行，尽管仅对图标来说这很好。
Make sure you import FontAwesome, add this at the top of the CSS file
确保导入 FontAwesome，将其添加到 CSS 文件的顶部
@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');
then add this in the CSS
然后在CSS中添加这个
input#edit-submit {
font-family: 'Font Awesome\ 5 Free';
background-color: transparent;
border: 0;
}
FLUSH ALL CACHES AND IT SHOULD WORK FINE
刷新所有缓存，它应该可以正常工作
Add Google Font Effects
添加谷歌字体效果
If you are using Google Web Fonts as well you can add also add effects to the icon (see more here https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta). You need to import a Google Web Font including the effect(s) you would like to use first in the CSS so it will be
如果您也使用 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');
Then go back to your .THEME file and add the class for the 3D Float Effect so the code will now add a class to the input. There are different effects available. So just choose the effect you like, change the CSS for the font import and the change the value FONT-EFFECT-3D-FLOAT int the code below to font-effect-WHATEVER_EFFECT_HERE. Note effects are still in Beta and don't work in all browsers so read here before you try it https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta
然后返回到您的 .THEME 文件并为 3D Float Effect 添加类，以便代码现在将一个类添加到输入中。有不同的效果可用。因此，只需选择您喜欢的效果，更改字体导入的 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('');
$form['actions']['submit']['#attributes']['class'][] = 'font-effect-3d-float';
}
?>
回答by Gimhana Jayasekara
Try this way.
In your css file change font-family: FontAwesomeinto font-family: "FontAwesome";or font-family: 'FontAwesome';. I've solved the same problem using this method.
试试这个方法。在您的 css 文件中更改font-family: FontAwesome为font-family: "FontAwesome";或font-family: 'FontAwesome';. 我已经使用这种方法解决了同样的问题。
