web-dev-qa-db-ja.com

自分のCSSで素晴らしいフォントを使用する方法は？

私はbootstrapとFont Awesomeを使用しています。カスタムcssクラスでは、画像を使用する代わりにFont Awesomeアイコンを含めようとしました。FontAwesomeの前のコードを次に示します。

.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>

....

....

ここで私が取り組んでいるもののフィドル 。

css3twitter-bootstrapfont-awesome
13
user2636556

: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 これが役立つことを願っています

31
da-hype

Webフォントの精神は、可能な限りキャッシュを使用することです。したがって、<head></head>自分をホストする代わりに：

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

また、CSS[〜＃〜]（〜＃〜]の後に上記の行を読み込んだか、カスタムフォントCSSが機能しないことを確認してください。

リファレンス： Font Awesome Get Started

7
Raptor

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 Web Fontsも使用している場合は、アイコンにエフェクトを追加することもできます（詳細はこちらを参照してください https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta ）。 CSSで最初に使用したいエフェクトを含むGoogle Web Fontをインポートする必要があります。

@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 Effectのクラスを追加して、コードが入力にクラスを追加するようにします。さまざまな効果が利用可能です。好きなエフェクトを選択し、フォントインポートの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';
}
?>
2
Nicholas Simon Cronwright

この方法を試してください。 cssファイルの変更font-family: FontAwesome into font-family: "FontAwesome";またはfont-family: 'FontAwesome';。この方法を使用して同じ問題を解決しました。

0
Gimhana Jayasekara