Ikonit

Finnassa on käytössä kaksi ikoni-kirjastoa, Font Awesome ja FinnaIcons, joita voi hyödyntää Finna-näkymissä.

Font Awesome 4

Lista Font Awesome-ikoneista löytyy Font Awesome-projektin verkkosivulta.

FinnaIcons

Lista FinnaIcons-ikoneista:

Huom.! FinnaIcons-ikonit määritellään theme.config.php-tiedostossa ilman etuliitettä fi.

Ikonien käyttö sivupohjassa

Ikonisysteemin idea on, että jokaisella ikonilla on "looginen" nimi eli alias, joka kuvastaa ikonin käyttötarkoitusta. Kukin alias mapataan varsinaiseen ikoniin näkymän theme.config.php:ssä. Näin sivupohjissa käytetään vain loogisia nimiä, ja minkä tahansa ikonin vaihtaminen toiseen onnistuu säätämällä aliasta theme.config.php:ssa.

Voit lisätä ikonin sivupohjaan seuraavalla koodinpätkällä:

<?=$this->icon('ikonin-alias') ?>

Esim. haku-ikonin lisäys sivupohjaan.

<?=$this->icon('search') ?>

Mikäli aiemmin sivupohjassa on käytetty HTML-koodia ikonin näyttämiseen, voidaan <i class="fa fa-ikonin-nimi" aria-hidden="true"></i> -tyyppiset HTML-koodit muuttaa muotoon <?=$this->icon('ikonin-alias') ?> .

Ikonille voi myös lisätä oman luokan, jonka avulla ikonia voi esimerkiksi tyylittää CSS:llä.

<?=$this->icon('ikonin-alias', 'ikonin-alias-icon') ?>

.ikonin-alias-icon {
  font-size: 36px;
}

Ikoni-asetukset

Käytössä olevat ikonit määritellään näkymän theme.config.php-tiedostossa. Voit määrittää poikkeavia määrityksiä näkymän custom-teemaan, mikäli haluat korvata näkymässä ikonin toisella ikonilla tai lisätä ikonin, jota ei ole määritelty finna2-teemassa. Voit tarkistaa finna2-teeman käytössä olevat ikonimääritykset theme.config.php-tiedostosta.

Esimerkkinä theme.config.php, jossa on vaihdettu ja lisätty yksi ikoni, ja lisäksi on toinen hakuikoni aliaksena toiselle:

<?php
return [
    'extends' => 'finna2',
    'css' => [
        'custom.css',
        'settings.css',
    ],
    'js' => [
        'custom.js',
    ],
    'icons' => [
        'aliases' => [
            // Uusi ikoni nimellä "logo":
            'logo' => 'FinnaIcons:finna',
            // Haun ikoni vaihdettu toiseen:
            'search' => 'FontAwesome:arrow-right',
            // Toinen alias samalle hakuikonille (mahdollistaa eriyttämisen myöhemmin):
            'article-search' => 'Alias:search',
        ],
    ],
];