CodeigniterとFontAwesome5を使用しています。最新バージョンのfontawesome 5をダウンロードしましたが、何らかの理由でアイコンが表示されません。
質問アイコンをfontawesome5で表示する方法xamppを使用しています
サインインテキストの横に、開発コンソールにエラーがないことが表示されます。
<!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>
5.0.10を実行するためのfontawesomeサイトの手順は、どのファイルをどこに配置するかに関しては少し混乱します。私はこの正確な問題に遭遇し、次の手順で解決しました。
次のディレクトリを作成します
/ static/styles/fontawesome/css
すべてのfontawesomecssファイルをコピーして上記のディレクトリに貼り付けます
Webfontsディレクトリ全体をコピーして/ static/styles/fontawesomeに貼り付けます(cssディレクトリと同じレベルになるように)
以下をhtmlヘッダーに追加します
<link rel="stylesheet" href="static/styles/fontawesome/css/fontawesome-all.css">
対応するバージョンドキュメント(5.0.10)を使用して、コードにアイコンタグを追加します
<i class="fas fa-tachometer-alt"></i>
注:ライセンスをお持ちでない場合は、必ずフリーセットのアイコンのみを使用してください。 https://fontawesome.com/icons?d=gallery&m=free
これはすべての人に役立つとは限りませんが、この苛立たしい問題で誰かが助けになることを願っています!
font Awesome5のプロバージョンであるfas fa-sign-in-alt
を使用している場合は、ライセンスを取得する必要があります。そうすると、自分だけがそれらを使用できるようになります。あなたはからあなたのアイコンを得ることができます ここ
私の場合、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;
Codeigniter 3/Bootstrap 4/Font Awesome 5
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
$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;
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>
おっと。