Outpout fontawesome icons via kirbytext?

The CMS Questions
1

Hello dear friends,

i just have a question, i have this section whit some icons from fontawesome

forex.png819×765 36.9 KB

and this is the markup

<ul class="icons-grid">
                            <li>
                                <span class="icon major fa-camera-retro"></span>
                                <h3>Magna Etiam</h3>
                            </li>
                            <li>
                                <span class="icon major fa-pencil"></span>
                                <h3>Lorem Ipsum</h3>
                            </li>
                            <li>
                                <span class="icon major fa-code"></span>
                                <h3>Nulla Tempus</h3>
                            </li>
                            <li>
                                <span class="icon major fa-coffee"></span>
                                <h3>Sed Feugiat</h3>
                            </li>
                        </ul>

Do you have any ideas how i can make that editable whit the Panel?.

Have a great day :sunny:

1 Like
2

You could use a structure field. Each structure item would have a title and icon field. The PHP code would look like this:

<ul class="icons-grid">
    <?php foreach($page->icongrid()->toStructure() as $icon): ?>
    <li>
        <span class="icon major fa-<?php echo $icon->icon() ?>"></span>
        <h3><?php echo $icon->title() ?></h3>
    </li>
    <?php endforeach ?>
</ul>
1 Like
3

Okay thanks a lot for this information, and the icon field how exactly should look?. i have the icon field already installed

4

Do you mean this icon field? There’s an example blueprint in the repo. :slight_smile:
You could use a simple text field as well, it just won’t have a preview in the Panel. Works just the same though.

5

okay i will take a look at it, but i have this example field:

  icons:
    label: Social Icons
    type: structure
    style: items
    modalsize: medium
    fields:
      icon:
        label: Icon
        type: icon
        placeholder: heart-o
      icontext:
        label: Icon Text
        type: text
        icon: font

can i use this example?