# A WooCommerce ikonfontja bővítményekben

> Fejlesztőknek: hogyan használhatod a WooCommerce saját ikonfontját a bővítményed admin felületén.

A WooCommerce saját ikonfonttal jelenít meg minden ikont az admin felületén. Ez gyorsabb betöltést ad, és bármilyen képernyőn éles marad. Ez a fejezet fejlesztőknek szól: akkor lesz rá szükséged, ha saját bővítményt készítesz, és ikont szeretnél például a terméklap adatainak füléhez vagy egy új főmenüponthoz. Ha nem írsz kódot, nyugodtan átugorhatod.

A használathoz SCSS (vagy LESS) és a WooCommerce magjában lévő mixinek kellenek. A testreszabás nem tartozik a támogatás körébe, ezért bonyodalmak esetén kérj fejlesztő segítségét.

## A mixinek betöltése

Importáld a WooCommerce mixinjeit a bővítményed admin stíluslapjába (a példában a `your-plugin/assets/css/admin.less` fájlba):

```scss
@import '../../../woocommerce/assets/css/_mixins.scss';
```

Ezzel az ikonfüggvények mellett a WooCommerce összes többi mixinje is elérhető lesz.

## A függvények

| Függvény | Mire való |
|---|---|
| `ir();` | Előkészít egy elemet arra, hogy ikon váltsa le a szövegét. |
| `icon();` | Beszúr egy ikont. |
| `iconbefore();` | Ikont tesz az elem elé. |
| `iconafter();` | Ikont tesz az elem után. |

### Szöveg lecserélése ikonra

Az `ir();` beállítja az elem méretét, a szöveg behúzását, a betűcsaládot és a többit, hogy az elem teljesen ikonként jelenjen meg. Legyen például egy bezáró gomb:

```html
<a href="#" class="close">Close</a>
```

Ha a „Close” szó helyett kereszt kell, használd ezt az SCSS-t:

```scss
.close {
  .ir;
  &:before {
    .icon("\e013");
  }
}
```

Az `icon();` kizárólag a `:before` vagy `:after` álelemen használható. Beállítja a pozíciót, az igazítást és a sormagasságot, és megadja, melyik karakter jelenjen meg a WooCommerce ikonfontjából. A karakterkódok listáját a WooCommerce ikonjait tartalmazó fejlesztői tárolóból letölthető `demo.html` fájl mutatja.

### Ikon az elem elé

Az `iconbefore();` ikont tesz az elem elé, és csak a `:before` álelemen használható. Az `icon();`-nal ellentétben nem kell hozzá az elemet előkészíteni az `ir();`-rel. Például a terméklap adatainak füléhez egy levél ikon:

```scss
.tab-link:before {
  .iconbefore("\e02d");
}
```

### Ikon az elem után

Az `iconafter();` ugyanezt teszi, de az elem után, és csak a `:after` álelemen használható:

```scss
.tab-link:after {
  .iconafter("\e02d");
}
```

## Saját ikonfont

A WooCommerce ikonjai nem biztos, hogy mindent lefednek, amire a bővítményednek szüksége van. Ilyenkor saját fontot is használhatsz, és az ikonfüggvényeket továbbra is használhatod, így alig kell saját CSS-t írnod.

1. Rajzold meg az ikonokat vektorgrafikus programban, például Illustratorban.
2. Importáld őket egy ikonfont-készítő alkalmazásba, például az IcoMoonba, és készíts belőle fontot.
3. Add hozzá a letöltött csomagban kapott kódot az `admin.less` fájlodhoz.
4. Használd az ikonfüggvényeket, de írd felül bennük a `font-family` értéket a saját fontoddal.

Ha a font neve „MyExtensionFont”:

```scss
.tab-link:after {
  .iconafter("\e02d");
  font-family: 'MyExtensionFont' !important;
}
```

A karakterkód ilyenkor a saját fontod megfelelő karakterét jelenti. Ahol nem adsz meg saját ikont (például a termékadatok fülein), általában a WooCommerce ikonja szolgál tartalékként, de a saját ikonokkal ápoltabb lesz a bővítményed megjelenése.