Přehled ikon je zde:

• https://developer.wordpress.org/resource/dashicons/#admin-home

Tyto ikony jsou již v základní instalaci wordpressu, jsou však použity jen v administraci. Existuje sice plugin, pomocí kterého lze přiřadit v menu (Administrace – Vzhed – Menu) jednotlivé ikony. Pokud byste měli kvůli každé drobnosti instalovat plugin, měli byste v instalaci desítky pluginů Proto zde popíšu jiný způsob. Další možností je také registrace do Function.php

1. Předpokládá se, že máte nainstalovaný plugin All-in-One-SEO-Pack.
2. Do sekce HEAD (Záhlaví = Header.php) přidáte řádek, který aktivuje font ikon:
   <link rel='stylesheet' id='dashicons-css' href="<?php bloginfo( 'wpurl' ); ?>/wp-includes/css/dashicons.min.css" type='text/css' media='all' />
3. Z výše uvedeného seznamu si pro konkrétní webovou stránku (resp. pro menu) vyberete příslušnou ikonu.
4. V administraci stránky najdete sekci All-in-One-SEO-Pack a pole Label. Do pole vepíšete název ikony a poté název stránky. Např. pro stránku Kontakt to může vypadat takto:
   <span class="dashicons dashicons-email-alt" style="padding-top:0.45em"></span>Kontakt
   Lokální stylování slouží jen ke svislému zarovnání ikony. Uložit a hotovo

Připravte a umístěte na web, nejlépe do rootu, alespoň jednu ikonu pro zařízení Apple:

• název: apple-touch-icon.png
• velikost: 57 × 57 pixel (standard)

Zápis do meta značek

Ideálně, když připravíte celkem čtyři soubory. Velikost v pixelech té první ikony je rovněž 57 × 57 pixelů.


<link rel="apple-touch-icon" href="/apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-ipad3.png" />


Malá změna pro iOS 7 (2013)

pro iPhone Retina z 114 × 114 px na 120 × 120 px
pro iPad Retina z 144 × 144 px na 152 × 152 px

Ikony pro jiná rozlišení zůstávají stejné.
57 × 57 px  = default
76 × 76 px pro iPady bez retiny


<link rel="apple-touch-icon" href="/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/touch-icon-ipad-retina.png" />


Jak zjistíte, že návštěvníci vašeho webu používají zařízení Apple

Pokud monitorujete nedostupné stránky, objeví se tam za sebou požadavky na tyto čtyři soubory:

• apple-touch-icon-57×57-precomposed.png
• apple-touch-icon-57×57.png
• apple-touch-icon-precomposed.png
• apple-touch-icon.png

Odkazy

• http://www.pic2icon.com/site_icon_for_iphone_ipad_generator.php – generátor ikon pro Apple
• stackoverflow.com

Moje tlačítka/ikonky

Sám jsem doposud vytvořil tyto:

• Google Analytics
• Google Webmaster Tools
• Seznam.cz
• Wikina
• Kinotip
• Dpp

Detailně viz Galerie tlačítek pro Google Toolbar

Pokud budete potřebovat nějaké tlačítku/ikonku, tak to můžete zkusit sami nebo mi napište a já vám je pomůžu vytvořit.

Nástroje pro tvorbu tlačítek/ikon

• http://www.motobit.com/util/base64-decoder-encoder.asp

https://developers.facebook.com/docs/plugins

Vyberete typ ikonky (Like, Share, …), vyplníte formulář a Facebook vám vygeneruje kód, který umístíte do svých webových stránek.

Fotografie/obrázky pro volné užití

• commons.wikimedia.org – velmi mnoho fotografií, avšak ne všechno lze volně užít
• www.123rf.com – dobrý výběr, DOPORUČUJI, v rozlišení pro web ZDARMA, možnost stažení fotografie/obrázku je časově limitováno
• iStockPhoto.com – každý týden jeden snímek ve vysokém rozlišení
• Fotolia.com – každý den 15 fotografií, kvalita kompozice obrázků bývá však někdy příšerná, občas se poštěstí najít něco dobrého
• www.pdphoto.org 1000 fotografií
• www.sxc.hu – 400 000 obrázků
• www.creattor.com

• andrejkin.com – malý seznam obrázků pro web ZDARMA

Ikony pro volné užití

• www.icojoy.com/blogs/
• www.mintywhite.com
• www.creattor.com
• http://smashinghub.com/tag/psd-files
• www.shapes4free.com – vizuálně dobře zpracované

Náhled stránky

Formát souboru je PNG.

Další podobný server Thumbshots dělá v podstatě to samé. Navíc můžete pomocí příkazové řádky stahovat obrázek on-line. Jen se musíte registrovat.

Formát souboru je PXF.

Plugin Screengrab do Firefoxu je k dispozici zde:

• https://addons.mozilla.org/en-US/firefox/addon/screengrab/

Popis

Soubor Favicon.ico je ikonka, která se objevuje na začátku adresního řádku a na ouškách záložek. Detail ikonky Favicon.ico je vidět na obrázku dole.

Charakteristika

Doporučené umístění: root webu
Velikost: 16×16 pixelů

Umístění ve zdrojovém kódu stránky

Odkaz na ikonu Favicon.ico umístíte do části meta tagů, tj. kamkoliv do části ohraničenou značkami head, například takto:


<head/>
...
<link rel="shortcut icon" href="/favicon.ico" />
...
<head/>


On-line nástroje pro generování

• www.favicon.cc – on-line nástroj na vytvoření Favicon
• www.silisoftware.com/tools/favicon.php – vytvoření Favicon ze souboru (+ další ikony na desktop)
• tools.dynamicdrive.com/favicon/ – vytvoření Favicon ze souboru

Kde najít ikonku v prohlížeči

Následující obrázek názorně dokumentuje, kde ikonku Favicon.ico na monitoru najdete

Favicon.ico