Font Awesomeを表示したい

0
いいねをした人: 居ません
15件の投稿を表示中 - 1 - 15件目 (全17件中)
  • 投稿者
    投稿
  • #30395
    アバター画像星乃 みなみ
    閲覧者
    36

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】最新版
    【お使いのブラウザ】chtorm
    【当該サイトのURL】https://www.kigoulab.co.jp/

    ===

    font Awesomeのアイコンを使いたいとおもっています。
    ソースをみると、font Awesomeのjsファイルへのリンクがありましたので、
    そのままカスタムHTMLブロックにコードを入れてみたのですがだめでした。

    これは古い4のやつかと思い、5のJsコードをユーザー登録して、My Snow Monleyに登録してみました。

    //fontawesome用JSファイル追加
    add_action(
        'wp_enqueue_scripts',
        function() {
            wp_enqueue_script(
                'fontawesome',
                '//kit.fontawesome.com/c884482769.js crossorigin="anonymous"',
                [],
                false
            );
        }
    );

    これでも表示されませんでした。

    表示方法を教えて下さい。

    0
    いいねをした人: 居ません
    #30498
    アバター画像キタジマ タカシ
    参加者
    2421

    具体的にどのようなコードをカスタムHTMLブロックに入れて、どうダメだったかを教えてください。エラーが表示された、何も表示されない、?アイコンが表示される、など。

    0
    いいねをした人: 居ません
    #30499
    アバター画像星乃 みなみ
    閲覧者
    36

    Font Awesome 5 のコード

    <i class=”fas fa-cat”></i>

    をいれる。→ スペースは確保されるが、左上に○に!マークが表示

     

    Font Awesome 4 のコード

    <i class=”fa fa-thumbs-up” aria-hidden=”true”></i>

    をいれる。 → スペースは確保されるがフォントは表示されない

     

    こんな感じです。

     

    0
    いいねをした人: 居ません
    #30507
    アバター画像キタジマ タカシ
    参加者
    2421

    試してみたところ表示されました(Snow Monkey の FontAwesome は v5系なので v5 用のコードを入れました)。

    「軽量な FontAwesome を使用する」を有効にしていませんか? もし有効化していると、使用可能なアイコンがかなり制限されます。

    0
    いいねをした人: 居ません
    #30510
    アバター画像星乃 みなみ
    閲覧者
    36

    ちなみにFont Awesomeのバージョンは4.5どちらでしょうか?

    あ、回答かぶってましたね

    0
    いいねをした人: 居ません
    #30512
    アバター画像星乃 みなみ
    閲覧者
    36

    軽量な FontAwesome を使用する が有効になっていたので消しました

    バージョン5のタグをいれましたが、スペースが確保されるだけで、アイコンは表示されません

    ちなみに○に!のアイコンもでません(左上)

    うーん

    0
    いいねをした人: 居ません
    #30513
    アバター画像キタジマ タカシ
    参加者
    2421

    小山さんのサイトの HTML をみてみると、

    /snow-monkey/assets/fontawesome-all.min.js
    

    というファイルが参照されていますが、Snow Monkey にはそのようなファイルはありません。本来の場所は下記になります。

    /snow-monkey/assets/packages/fontawesome-free/js/all.min.js
    

    My Snow Monkey や子テーマで FontAwesome のパスを書き換えていませんか?

    0
    いいねをした人: 居ません
    #30514
    アバター画像星乃 みなみ
    閲覧者
    36

    いや、バージョン5用のjsファイルをフックしてましたが。
    コメントアウト済みで、先ほど削除しました。

    そのパスに、fontawesome-all.min.jsは最初からありましたよ

    もしかしたらスキンかもしれません?

    0
    いいねをした人: 居ません
    #30515
    アバター画像星乃 みなみ
    閲覧者
    36

    あ、ページ上にするのと、FooterCTAを閉じるものも消えました、これもFont Awesomeですよね

    あれー

    0
    いいねをした人: 居ません
    #30517
    アバター画像キタジマ タカシ
    参加者
    2421

    404 です。

    お使いのデザインスキンは僕が開発したものではないので、デザインスキンの README 等を確認してみてください。

    0
    いいねをした人: 居ません
    #30521
    アバター画像星乃 みなみ
    閲覧者
    36

    スキンを適用指定していないサイトに入れてみたのですが、表示されませんね。

    スキンを選んだのはウイジットのデザインがよかったからだけで、これだと、ウイジットのデザインだけカスタムCSSでつくって、スキン適用しなかったほうがよかったですねぇ。
    スキン作者にコンタクトとる手段もわからず….

    いずれにせよスキン依存ではなさそうです

    0
    いいねをした人: 居ません
    #30523
    アバター画像星乃 みなみ
    閲覧者
    36

    カスタムHTMLにいれるとソースが変わってしまいます

    <i class=”fas fa-cat”></i>

    ↓ 保存すると

    <i class=””fas” fa-cat”=””></i>

    これの原因はなんでしょうか

    0
    いいねをした人: 居ません
    #30524
    アバター画像キタジマ タカシ
    参加者
    2421

    スキンを適用指定していないサイトに入れてみたのですが、表示されませんね。

    となるとスキンは関係なさそうですね…。

    Snow Monkey も Snow Monkey Blocks (使っている場合)はどちらも最新版ですか? どちらも最新であれば、あとは全プラグインを停止して、一つずつ最有効化しては表示確認しながら地道にチェックしていくしかないと思います。

    カスタムHTMLにいれるとソースが変わってしまいます

    んー、ちょっとわからないですね…。こちらの環境では再現されません。それもなにかお使いのプラグインの影響という可能性はあるかもしれません。

    0
    いいねをした人: 居ません
    #30529
    アバター画像星乃 みなみ
    閲覧者
    36

    Snow-Monkey関連以外のプラグインを停止してみましたが、現象はかわりませんね。
    プラグインはすべて最新版です。うーん

    スペースは確保されるので、なにがしか動作はしてるんですよね。アイコンが表示されないだけで…

    0
    いいねをした人: 居ません
    #30532
    アバター画像星乃 みなみ
    閲覧者
    36

    JSのパスがきになりますが、コードには下記パスとなっていて、ファイルは存在します。

    <script type=’text/javascript’ src=’http://kimsweddingmovie.com/wp-content/themes/snow-monkey/assets/js/fontawesome.min.js?ver=1570669055′></script>

    これではダメということですかね。

    0
    いいねをした人: 居ません
15件の投稿を表示中 - 1 - 15件目 (全17件中)
  • トピック「Font Awesomeを表示したい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。