ACF Font Awesomeアドオンで、 Font Awesomeのアイコンを表示
以前のBLOGで、Font Awesomeのアイコンを表示するプラグインを紹介しました。今回は、ACF Font Awesomeアドオンで、 Font Awesomeのアイコンを表示する方法を紹介します。
今回のDEMOは、アイコンギャラリーです。
SPで2カラム、タブレットで3カラム、PCで４カラムとレスポンシブレイアウトになっています。フォント、フォント名、色を編集画面で設定しています。
ACF設定
フィールドタイプは、Font Awesome Iconです。フィールドラベルに編集画面に表示する名前、フィールド名にPHPに記入する名前を設定します。
フィールドタイプは、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個のフィールドを作成します。
バックグラウンドカラー、アイコンカラーは、カラーピッカーフィールドで作成
コード
シングルページループ内に下記コードを入力します。
<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」と入力します。候補のアイコンが表示されるので、好きなアイコンをクリックすれば、アイコン設定終了です。
その他、アイコン名、バックグラウンドカラー、アイコンカラー、を指定します。
アイコン01のテキストボックスに「anchor」と入力し、好きなアイコンをクリック。
アイコン設定終了
アイコン名、バックグラウンドカラー、アイコンカラー、を指定
残り全てのアイコンを設定したら完了です。
残り全てのアイコンを設定
以上で今回の説明は終了です。今回のようなアイコン一覧のほかに、タブメニューのアイキャッチとしても使用できます。ボタンは、イラストがあると、わかりやすいデザインになります。
