![](https://cxg-design.jp/wp-content/uploads/2024/06/acffontawesome_thumb02.png)
ACF Font Awesomeアドオンで、 Font Awesomeのアイコンを表示
以前のBLOGで、Font Awesomeのアイコンを表示するプラグインを紹介しました。今回は、ACF Font Awesomeアドオンで、 Font Awesomeのアイコンを表示する方法を紹介します。
今回のDEMOは、アイコンギャラリーです。
SPで2カラム、タブレットで3カラム、PCで4カラムとレスポンシブレイアウトになっています。フォント、フォント名、色を編集画面で設定しています。
ACF設定
フィールドタイプは、Font Awesome Iconです。フィールドラベルに編集画面に表示する名前、フィールド名にPHPに記入する名前を設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/ad0f2cfaabbf8331185f8f1a6756e1ce.png)
フィールドタイプは、Font Awesome Icon
項目 | 設定値 |
---|---|
フィールドタイプ | Font Awesome Icon |
フィールドラベル | アイコン01 |
フィールド名 | add_awesomeicon01 |
Icon Sets | Solid Redular Brands |
Default Icon | 空欄 |
Return Value | IconElement |
slow Null? | No |
Show Icon Preview | Yes |
Enqueue FontAwesome? | No |
アイコン名は、テキストフィールドで作成します。バックグラウンドカラー、アイコンカラーは、カラーピッカーフィールドで作成します。それぞれ12個のフィールドを作成します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/fb007bf427b668f3317ca90867ef1023.png)
バックグラウンドカラー、アイコンカラーは、カラーピッカーフィールドで作成
コード
シングルページループ内に下記コードを入力します。
<ul class="awesome_wrapper">
<?php if (get_field('add_awesomeicon01')): ?>
<li class="add_awesomeicon" style="background-color: <?php the_field('add_backcolor01'); ?>; color: <?php the_field('add_iconcolor01'); ?>;">
<figure class="matome">
<span class="awesomeicon"><?php the_field('add_awesomeicon01'); ?></span>
<h5><?php the_field('add_iconname01'); ?></h5>
</figure>
<li>
<?php endif ?>
<?php if (get_field('add_awesomeicon02')): ?>
<li class="add_awesomeicon" style="background-color: <?php the_field('add_backcolor02'); ?>; color: <?php the_field('add_iconcolor02'); ?>;">
<figure class="matome">
<span class="awesomeicon"><?php the_field('add_awesomeicon02'); ?></span>
<h5><?php the_field('add_iconname02'); ?></h5>
</figure>
<li>
<?php endif ?>
<?php if (get_field('add_awesomeicon03')): ?>
<li class="add_awesomeicon" style="background-color: <?php the_field('add_backcolor03'); ?>; color: <?php the_field('add_iconcolor03'); ?>;">
<figure class="matome">
<span class="awesomeicon"><?php the_field('add_awesomeicon03'); ?></span>
<h5><?php the_field('add_iconname03'); ?></h5>
</figure>
<li>
<?php endif ?>
<?php if (get_field('add_awesomeicon04')): ?>
<li class="add_awesomeicon" style="background-color: <?php the_field('add_backcolor04'); ?>; color: <?php the_field('add_iconcolor04'); ?>;">
<figure class="matome">
<span class="awesomeicon"><?php the_field('add_awesomeicon04'); ?></span>
<h5><?php the_field('add_iconname04'); ?></h5>
</figure>
<li>
<?php endif ?>
<?php if (get_field('add_awesomeicon05')): ?>
<li class="add_awesomeicon" style="background-color: <?php the_field('add_backcolor05'); ?>; color: <?php the_field('add_iconcolor05'); ?>;">
<figure class="matome">
<span class="awesomeicon"><?php the_field('add_awesomeicon05'); ?></span>
<h5><?php the_field('add_iconname05'); ?></h5>
</figure>
<li>
<?php endif ?>
<?php if (get_field('add_awesomeicon06')): ?>
<li class="add_awesomeicon" style="background-color: <?php the_field('add_backcolor06'); ?>; color: <?php the_field('add_iconcolor06'); ?>;">
<figure class="matome">
<span class="awesomeicon"><?php the_field('add_awesomeicon06'); ?></span>
<h5><?php the_field('add_iconname06'); ?></h5>
</figure>
<li>
<?php endif ?>
<?php if (get_field('add_awesomeicon07')): ?>
<li class="add_awesomeicon" style="background-color: <?php the_field('add_backcolor07'); ?>; color: <?php the_field('add_iconcolor07'); ?>;">
<figure class="matome">
<span class="awesomeicon"><?php the_field('add_awesomeicon07'); ?></span>
<h5><?php the_field('add_iconname07'); ?></h5>
</figure>
<li>
<?php endif ?>
<?php if (get_field('add_awesomeicon08')): ?>
<li class="add_awesomeicon" style="background-color: <?php the_field('add_backcolor08'); ?>; color: <?php the_field('add_iconcolor08'); ?>;">
<figure class="matome">
<span class="awesomeicon"><?php the_field('add_awesomeicon08'); ?></span>
<h5><?php the_field('add_iconname08'); ?></h5>
</figure>
<li>
<?php endif ?>
<?php if (get_field('add_awesomeicon09')): ?>
<li class="add_awesomeicon" style="background-color: <?php the_field('add_backcolor09'); ?>; color: <?php the_field('add_iconcolor09'); ?>;">
<figure class="matome">
<span class="awesomeicon"><?php the_field('add_awesomeicon09'); ?></span>
<h5><?php the_field('add_iconname09'); ?></h5>
</figure>
<li>
<?php endif ?>
<?php if (get_field('add_awesomeicon10')): ?>
<li class="add_awesomeicon" style="background-color: <?php the_field('add_backcolor10'); ?>; color: <?php the_field('add_iconcolor10'); ?>;">
<figure class="matome">
<span class="awesomeicon"><?php the_field('add_awesomeicon10'); ?></span>
<h5><?php the_field('add_iconname10'); ?></h5>
</figure>
<li>
<?php endif ?>
<?php if (get_field('add_awesomeicon11')): ?>
<li class="add_awesomeicon" style="background-color: <?php the_field('add_backcolor11'); ?>; color: <?php the_field('add_iconcolor11'); ?>;">
<figure class="matome">
<span class="awesomeicon"><?php the_field('add_awesomeicon11'); ?></span>
<h5><?php the_field('add_iconname11'); ?></h5>
</figure>
<li>
<?php endif ?>
<?php if (get_field('add_awesomeicon12')): ?>
<li class="add_awesomeicon" style="background-color: <?php the_field('add_backcolor12'); ?>; color: <?php the_field('add_iconcolor12'); ?>;">
<figure class="matome">
<span class="awesomeicon"><?php the_field('add_awesomeicon12'); ?></span>
<h5><?php the_field('add_iconname12'); ?></h5>
</figure>
<li>
<?php endif ?>
</ul>
CSSでスタイルを整えます。
.awesome_wrapper {
display: flex;
flex-wrap: wrap;
}
.add_awesomeicon {
width: 50%;
min-height: 50vw;
text-align: center;
position: relative;
}
.awesomeicon {
font-size: 3em;
font-weight: 400;
line-height: 1;
margin: auto;
}
.matome {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
@media screen and (min-width: 740px) {
.add_awesomeicon{
width:calc(100%/3);
min-height:calc(100vw/3);
}
}
@media screen and (min-width: 1250px) {
.add_awesomeicon{
width:25%;
min-height:25vw;
}
}
設置
編集画面にACFフォントawesomeフィールドが作成されます。Font Awesome Iconフィールドのアイコン01のテキストボックスに「anchor」と入力します。候補のアイコンが表示されるので、好きなアイコンをクリックすれば、アイコン設定終了です。
その他、アイコン名、バックグラウンドカラー、アイコンカラー、を指定します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/d00e3dc4f8b6d1a0fd0e0962730afc4a.png)
アイコン01のテキストボックスに「anchor」と入力し、好きなアイコンをクリック。
![](https://cxg-design.jp/wp-content/uploads/2024/06/48ad75bde7a1c35f97bb4894eb91e93f.png)
アイコン設定終了
![](https://cxg-design.jp/wp-content/uploads/2024/06/c61085af20dcfca585100db2838d7f76.png)
アイコン名、バックグラウンドカラー、アイコンカラー、を指定
残り全てのアイコンを設定したら完了です。
![](https://cxg-design.jp/wp-content/uploads/2024/06/f636e574c4b9d361c5b6a29a7f38ddcb.png)
残り全てのアイコンを設定
以上で今回の説明は終了です。今回のようなアイコン一覧のほかに、タブメニューのアイキャッチとしても使用できます。ボタンは、イラストがあると、わかりやすいデザインになります。