web-dev-qa-db-ja.com

Font Awesome5アイコンが表示されない

CodeigniterとFontAwesome5を使用しています。最新バージョンのfontawesome 5をダウンロードしましたが、何らかの理由でアイコンが表示されません。

質問アイコンをfontawesome5で表示する方法xamppを使用しています

サインインテキストの横に、開発コンソールにエラーがないことが表示されます。

enter image description here

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title><?php echo $title;?></title>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/plugins/bs/css/bootstrap.css');?>">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/stylesheet.css');?>">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/plugins/fa/web-fonts-with-css/fontawesome-all.min.css');?>">
    <script type="text/javascript" src="<?php echo base_url('assets/js/jquery-3.2.1.slim.min.js');?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/js/popper.min.js');?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/plugins/bs/js/bootstrap.js');?>"></script>
</head>
<body>

<div class="row mb-3">
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <a href="<?php echo base_url('login');?>" class="btn btn-dark"><i class="fas fa-sign-in-alt"></i> Sign in</a>
    </div>
</div>

</body>
</html>
font-awesomefont-awesome-5
2
Mr. ED

5.0.10を実行するためのfontawesomeサイトの手順は、どのファイルをどこに配置するかに関しては少し混乱します。私はこの正確な問題に遭遇し、次の手順で解決しました。

  1. 次のディレクトリを作成します

    / static/styles/fontawesome/css

  2. すべてのfontawesomecssファイルをコピーして上記のディレクトリに貼り付けます

  3. Webfontsディレクトリ全体をコピーして/ static/styles/fontawesomeに貼り付けます（cssディレクトリと同じレベルになるように）

  4. 以下をhtmlヘッダーに追加します<link rel="stylesheet" href="static/styles/fontawesome/css/fontawesome-all.css">

  5. 対応するバージョンドキュメント（5.0.10）を使用して、コードにアイコンタグを追加します
    <i class="fas fa-tachometer-alt"></i>

注：ライセンスをお持ちでない場合は、必ずフリーセットのアイコンのみを使用してください。 https://fontawesome.com/icons?d=gallery&m=free

これはすべての人に役立つとは限りませんが、この苛立たしい問題で誰かが助けになることを願っています！

4
mikeym

font Awesome5のプロバージョンであるfas fa-sign-in-altを使用している場合は、ライセンスを取得する必要があります。そうすると、自分だけがそれらを使用できるようになります。あなたはからあなたのアイコンを得ることができます ここ

参照 https://fontawesome.com/pro

2
Abhishek Ekaanth

私の場合、config\config.phpにbase_url値が設定されていないため、ローカルホストのfontawesomeに正方形のアイコンが表示されます。

$config['base_url']    = ''

base_urlを次のように変更すると機能します

$http = 'http' . ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') ? 's' : '') . '://';
$newurl = str_replace("index.php","", $_SERVER['SCRIPT_NAME']);
$config['base_url']    = "$http" . $_SERVER['SERVER_NAME'] . "" . $newurl;
0
Muhammad Lutfi Farid

Codeigniter 3/Bootstrap 4/Font Awesome 5

PHPファイル

  1. cSS実装プラグインを含むheader.phpファイル。 _<link rel="stylesheet" href="../../assets/vendor/font-awesome/css/fontawesome-all.min.css">_を次のように変更します。

<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/vendor/font-awesome/css/fontawesome-all.min.css');?>">

CODEIGNITER

  1. application/config /config.php。 _$config['base_url'] = '';_を次のように変更します。

$http = 'http' . ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') ? 's' : '') . '://'; $newurl = str_replace("index.php","", $_SERVER['SCRIPT_NAME']); $config['base_url'] = "$http" . $_SERVER['SERVER_NAME'] . "" . $newurl;

0
Joshua Coda

CDNとJavascriptのダウンロード（solid.jsとfontawesome.jsの両方）を介してFont Awesomeを使用している人にとっては、整合性ハッシュが重要です。私の場合、私は怠惰になり、ハッシュを更新せずにスクリプトリンクを新しいバージョンに更新しました。ダウンロードした2つのファイルをChrome devtoolsで確認できましたが、機能していませんでした。整合性ハッシュは元のソースと完全に一致する必要があります...

    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>

おっと。

0
zipzit