Edytor szablonu w technologii Storefront umożliwia wgrywanie własnych zestawów ikon (np. koszyk, konto klienta, wyszukiwarka itp.), dzięki czemu zyskujesz możliwość jeszcze większej personalizacji szablonu sklepu.
Ikoną szablonu nazywamy plik .svg posiadający ID o wartości zaczynającej się od icon-*
np. /assets/img/icons/symbol-defs.svg#icon-basket
Proces wymiany ikon wymaga umiejętności swobodnego poruszania się po kodzie szablonu i jego interpretacji. Skorzystaj ze wsparcia naszych partnerów, jeśli nie czujesz się na siłach, aby wgrać ikony samodzielnie.
Jak przygotować zestaw ikon przed wgraniem do edytora szablonu?
Skąd wziąć ID ikon w szablonie Storefront?
Najłatwiej skorzystać z funkcji Zbadaj dostępnej w każdej przeglądarce. W przypadku ikony koszyka właściwa dla niej linia kodu to: <use xlink:href=”/assets/img/icons/symbol-defs.svg#icon-basket”></use>.
ID to informacja, która znajduje się po znaku #.
Jak wgrać ikony do szablonu Storefront?
Pozostałe pytania dotyczące wgrywania ikon do szablonu Storefront
Wgrywając ikony, musisz wymienić cały zestaw dostępnych, aktywnych w szablonie ikon. Nowe ikony, posiadające właściwe ID zostaną nadpisane, natomiast pozostałe ikony, które nie będą miały przypisanego poprawnego ID lub nie będą go miały w ogóle, zostaną pominięte w procesie. W efekcie końcowym przestaną się one wyświetlać w szablonie.
Tak, możesz przywrócić w szablonie wyświetlanie. Przejdź do edytora szablonu Storefront, następnie kliknij: Ustawienia i w sekcji: Ikony odznacz opcję: Zastąp domyślne ikony własnymi.
Panel edytora szablonu nie daje możliwości eksportu ikon do pliku, aczkolwiek możliwe jest to za pomocą API.
Poniżej znajduje się lista ID ikon dostępnych w szablonie w technologii Storefront. Te, które są używane w domyślnym (podstawowym) szablonie, posiadają oznaczenie: aktywna. Lista aktywnych ikon może się zmieniać wraz z rozwojem szablonów graficznych.
| icon-activity |
| icon-airplay |
| icon-alert-circle |
| icon-alert-octagon |
| icon-alert-triangle (aktywna) |
| icon-align-center |
| icon-align-justify |
| icon-align-left |
| icon-align-right |
| icon-anchor |
| icon-aperture |
| icon-archive |
| icon-arrow-down |
| icon-arrow-down-circle |
| icon-arrow-down-left |
| icon-arrow-down-right |
| icon-arrow-left (aktywna) |
| icon-arrow-left-circle |
| icon-arrow-right |
| icon-arrow-right-circle |
| icon-arrow-up |
| icon-arrow-up-circle |
| icon-arrow-up-left |
| icon-arrow-up-right |
| icon-at-sign |
| icon-award |
| icon-bar-chart |
| icon-bar-chart-2 |
| icon-basket |
| icon-basket-off |
| icon-battery |
| icon-battery-charging |
| icon-bell (aktywna) |
| icon-bell-off (aktywna) |
| icon-bluetooth |
| icon-bold |
| icon-book |
| icon-book-open |
| icon-bookmark |
| icon-box |
| icon-briefcase |
| icon-calendar |
| icon-camera |
| icon-camera-off |
| icon-cast |
| icon-check (aktywna) |
| icon-check-circle |
| icon-check-square |
| icon-chevron-down (aktywna) |
| icon-chevron-left (aktywna) |
| icon-chevron-right (aktywna) |
| icon-chevron-up (aktywna) |
| icon-chevrons-down |
| icon-chevrons-left |
| icon-chevrons-right |
| icon-chevrons-up |
| icon-chevrons-updown |
| icon-chrome |
| icon-circle |
| icon-clipboard |
| icon-clock (aktywna) |
| icon-cloud |
| icon-cloud-drizzle |
| icon-cloud-lightning |
| icon-cloud-off |
| icon-cloud-rain |
| icon-cloud-snow |
| icon-code |
| icon-codepen |
| icon-codesandbox |
| icon-coffee |
| icon-columns |
| icon-command |
| icon-compass |
| icon-copy |
| icon-corner-down-left |
| icon-corner-down-right |
| icon-corner-left-down |
| icon-corner-left-up |
| icon-corner-right-down |
| icon-corner-right-up |
| icon-corner-up-left |
| icon-corner-up-right |
| icon-cpu |
| icon-credit-card (aktywna) |
| icon-crop |
| icon-crosshair |
| icon-database |
| icon-delete |
| icon-disc |
| icon-dollar-sign |
| icon-download |
| icon-download-cloud |
| icon-droplet |
| icon-edit |
| icon-edit-2 |
| icon-edit-3 |
| icon-external-link |
| icon-eye |
| icon-eye-off |
| icon-facebook |
| icon-fast-forward |
| icon-feather |
| icon-figma |
| icon-file (aktywna) |
| icon-file-minus |
| icon-file-plus |
| icon-file-text (aktywna) |
| icon-film |
| icon-filter |
| icon-flag |
| icon-folder |
| icon-folder-minus |
| icon-folder-plus |
| icon-framer |
| icon-frown |
| icon-gift (aktywna) |
| icon-git-branch |
| icon-git-commit |
| icon-git-pull-request |
| icon-github |
| icon-gitlab |
| icon-globe |
| icon-grid |
| icon-hard-drive |
| icon-hash |
| icon-headphones |
| icon-heart (aktywna) |
| icon-help-circle |
| icon-hexagon |
| icon-home |
| icon-image |
| icon-inbox |
| icon-info |
| icon-instagram |
| icon-italic |
| icon-key |
| icon-layers |
| icon-layout |
| icon-life-buoy |
| icon-link |
| icon-link-2 |
| icon-linkedin |
| icon-list |
| icon-loader |
| icon-lock |
| icon-log-in |
| icon-log-out |
| icon-mail (aktywna) |
| icon-map |
| icon-map-pin (aktywna) |
| icon-maximize |
| icon-maximize-2 |
| icon-meh |
| icon-menu |
| icon-message-circle (aktywna) |
| icon-message-square (aktywna) |
| icon-mic |
| icon-mic-off |
| icon-minimize |
| icon-minimize-2 |
| icon-minus |
| icon-minus-circle |
| icon-minus-square |
| icon-monitor |
| icon-moon |
| icon-more-horizontal |
| icon-more-vertical |
| icon-mouse-pointer |
| icon-move |
| icon-music |
| icon-navigation (aktywna) |
| icon-navigation-2 |
| icon-octagon |
| icon-package (aktywna) |
| icon-paperclip |
| icon-pause |
| icon-pause-circle |
| icon-pen-tool |
| icon-percent |
| icon-phone (aktywna) |
| icon-phone-call |
| icon-phone-forwarded |
| icon-phone-incoming |
| icon-phone-missed |
| icon-phone-off |
| icon-phone-outgoing |
| icon-pie-chart |
| icon-play |
| icon-play-circle |
| icon-plus (aktywna) |
| icon-plus-circle |
| icon-plus-square |
| icon-pocket |
| icon-power |
| icon-printer |
| icon-radio |
| icon-refresh-ccw |
| icon-refresh-cw |
| icon-repeat |
| icon-rewind |
| icon-rotate-ccw |
| icon-rotate-cw |
| icon-rss |
| icon-save |
| icon-scissors |
| icon-search |
| icon-send (aktywna) |
| icon-server |
| icon-settings |
| icon-share |
| icon-share-2 (aktywna) |
| icon-shield |
| icon-shield-off |
| icon-shopping-bag |
| icon-shopping-cart |
| icon-shuffle |
| icon-sidebar |
| icon-skip-back |
| icon-skip-forward |
| icon-slack |
| icon-slash |
| icon-sliders (aktywna) |
| icon-smartphone |
| icon-smile |
| icon-speaker |
| icon-square |
| icon-star (aktywna) |
| icon-stop-circle |
| icon-sun |
| icon-sunrise |
| icon-sunset |
| icon-tablet |
| icon-tag (aktywna) |
| icon-target |
| icon-terminal |
| icon-thermometer |
| icon-thumbs-down |
| icon-thumbs-up |
| icon-toggle-left |
| icon-toggle-right |
| icon-tool |
| icon-trash |
| icon-trash-2 |
| icon-trello |
| icon-trending-down |
| icon-trending-up |
| icon-triangle |
| icon-truck |
| icon-tv |
| icon-twitch |
| icon-twitter |
| icon-type |
| icon-umbrella |
| icon-underline |
| icon-unlock |
| icon-upload |
| icon-upload-cloud |
| icon-user (aktywna) |
| icon-user-check |
| icon-user-minus |
| icon-user-plus |
| icon-user-x |
| icon-users |
| icon-video |
| icon-video-off |
| icon-voicemail |
| icon-volume |
| icon-volume-1 |
| icon-volume-2 |
| icon-volume-x |
| icon-watch |
| icon-wifi |
| icon-wifi-off |
| icon-wind |
| icon-x (aktywna) |
| icon-x-circle |
| icon-x-octagon |
| icon-x-square |
| icon-youtube |
| icon-zap |
| icon-zap-off |
| icon-zoom-in |
| icon-zoom-out |
Warto zapamiętać!
- Jak dodać nowe ikony do szablonu w technologii Storefront?
- Skąd pobrać nowe ikony do szablonu?
- Jaką nazwę posiadają ikony dostępne w szablonie?