Istnieje wiele bibliotek zawierających ikony przystosowane do stron internetowych. Jedną z nich jest Font Awesome, podstawowa wersja biblioteki jest darmowa. Instalację biblioteki przedstawiliśmy w artykule „Jak zainstalować ikony Font Awesome w Zend Framework 3”.
Kod <i class="far fa-save text-success"></i>, odpowiedzialny za wyświetlenie ikony dyskietki umieszczamy w kluczu label. Na początku dodany kod HTML zostanie wyświetlony jako tekst. Odpowiada za to klucz disable_html_escape, który domyślnie ma przypisaną wartość false, dlatego zmieniamy wartość na true (Listing 1.). Działanie kodu możemy zobaczyć na rysunku 1.
Kolor ikony dodaliśmy za pomocą klasy text-success, pochodzącej z biblioteki Bootstrap.
Listing 1. Fragment pliku LanguageForm.php
...
// Font Button Zend Form
$this->add([
'name' => 'save',
'type' => Button::class,
// icon Button Zend Framework 3
'options' => [
'label' => '<i class="far fa-save text-success"></i> Zapisz',
'label_options' => [
'disable_html_escape' => true,
],
],
'attributes' => [
'value' => 'save',
'type' => 'submit',
'title' => 'Zapisz nowy język dla treści',
'class' => 'btn btn-outline-secondary',
'data-toggle' => 'tooltip',
'data-placement' => 'top',
],
]);
...
Listing 2. Fragment pliku widoku create.phtml
...
$this->formButton($form->get('save'));
...
Rys. 1. Prezentacja przycisku z ikoną w przeglądarce Chrome
W przyszłości kody HTML ikon mogą zostać zmienione, ikony Font Awesome znajdziemy pod adresem https://fontawesome.com/icons?d=gallery.
Wybrane książki:
- Adam Omelak: Zend Framework 3. Poradnik programisty, Wydawnictwo Helion, 2017
- Eric A. Meyer, Estelle Weyl: CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny. Wydanie IV, Wydawnictwo Helion, 2019.
- Keith J. Grant: CSS od podszewki, Wydawnictwo Helion, 2019.
Wybrane strony: