A WooCommerce ikonfontja bővítményekben

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):

@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:

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

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

.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:

.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ó:

.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”:

.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.