# Ikonok a mezők és a mezőcsoport címében

> Ikonok beszúrása a mezőcsoport és a mezők címébe HTML-lel, az MB Builderben és kódból is.

A mezőcsoport és a mezők címe nem csak szöveg lehet: egy ikon is állhat mellette vagy helyette. Az ikon a cím HTML-kódjába kerül, ezért a szerkesztőben és az űrlapokban is megjelenik, ahol a mező látszik.

![A Szerző adatai mezőcsoport ikonos címekkel a bejegyzés szerkesztőjében](./kepek/oktatoanyagok-ikonok-cimben.webp)

*A Szerző adatai mezőcsoport ikonos címekkel a bejegyzés szerkesztőjében* (https://minta-bolt.hu/wp-admin/post.php?post=4&action=edit)

Figyeld meg, hogy a mezőcsoport címe mellett és minden mező felirata előtt egy-egy kis ikon áll.

## 1. Az ikonkönyvtár betöltése

Az ikonokat valamelyik ikonkönyvtárból veszed. Használat előtt a könyvtárat be kell tölteni a sablonba.

- **Dashicons**: ezt a WordPress adja, nem kell betöltened.
- **FontAwesome, Elusive, Genericons**: töltsd le a könyvtárat, másold a CSS- és betűtípusfájlokat a sablon mappájába, és tölts be a CSS-t az admin felületen. Ehhez a sablon `functions.php` fájljába ilyen kód kell:

```php
function sajat_elotag_admin_stilus() {
    wp_enqueue_style( 'admin_css', get_stylesheet_directory_uri() . '/css/ikonok.css' );
}
add_action( 'admin_enqueue_scripts', 'sajat_elotag_admin_stilus' );
```

A kódban az `/css/ikonok.css` helyére a saját CSS-fájlod útvonala kerüljön a sablon mappáján belül. Ezután a betöltött könyvtár bármelyik ikonját használhatod a mezők címében is.

## 2. Az ikon HTML-kódja

A példa a Dashicons könyvtárat használja. Keresd ki a WordPress fejlesztői oldalán az ikont, és másold ki a HTML-kódját. A Dashicons ikonjai ilyen alakúak:

```html
<span class="dashicons dashicons-admin-users"></span>
```

## 3. Az ikon beillesztése a címbe

A HTML-kódot a cím szövege elé (vagy mellé, vagy helyette) kell írni. Bárhová beírhatod a címen belül. Az eljárás ugyanaz, akár az MB Builderben, akár kódban dolgozol.

### MB Builderben

1. Nyisd meg a mezőcsoportot a **Meta Box → Egyéni mezők** oldalon.
2. A mezőcsoport címébe (a szerkesztő tetején lévő címmezőbe) illeszd be az ikon HTML-kódját a szöveg mellé.
3. Nyisd le az egyes mezőket, és a **Név** mezőbe (ez a mező felirata) ugyanígy illeszd be az ikon kódját.
4. Mentsd a mezőcsoportot.

### Kódban

Ha a mezőcsoportot PHP-kóddal regisztrálod, az ikon HTML-kódját a `title` kulcs értékébe írd a mezőcsoport címéhez, és a `name` kulcs értékébe az egyes mezők feliratához:

```php
add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
    $meta_boxes[] = array(
        'title'  => '<span class="dashicons dashicons-id"></span> Szerző adatai',
        'id'     => 'szerzo',
        'fields' => array(
            array(
                'name' => '<span class="dashicons dashicons-admin-users"></span> Név',
                'id'   => 'szerzo_nev',
                'type' => 'text',
            ),
        ),
    );
    return $meta_boxes;
} );
```

## 4. Az ikonok megjelenése

A szerkesztőben a mezőcsoport és a mezők címe mellett megjelennek az ikonok (lásd a fenti képet). Ha a mezőcsoportot a webhely nyilvános oldalán is megjeleníted, például egy beküldő űrlap blokkal, az ikonok ott is látszanak. Az űrlap blokkban csak a mezőcsoport azonosítóját kell megadni, és a mezők az ikonokkal együtt megjelennek.