Jak převrátit / změnit měřítko / tučné a jinak upravit své fontawesome ikony

Vaše aplikace tedy používá ikony Fontawesome, ale vypadají stejně jako všechny ostatní aplikace a potřebujete něco více vlastního. Byl jsem na stejné lodi a trávil jsem čas zkoumáním, jak přivést svůj vlastní vzhled. Zde jsou některé metody, které jsem našel pro převracení, otáčení, změnu měřítka, tučné, měřítko, zbarvení a další způsob, jak zvýšit vaše fontawesome ikony. Některé jsou podporovány třídy z Fontawesome a některé jsou CSS.

Překlopit

Fontawesome má vestavěnou podporu pro běžné potřeby překlopení prostřednictvím dvou tříd:

fa-flip- * (možnosti: horizontální, vertikální)
 
 

Točit se

Totéž platí pro směr otáčení a světovou stranu:

fa-rotate- * (možnosti: 90, 180, 270)
 
 
 

Větší

Fontawesome vás také potáhl, pokud chcete zvětšit ikony tak, aby byly větší. Jednoduše přidejte podporované třídy pro velké, 2x, 3x, 4x a 5x standardní velikosti:

fa- * (možnosti: lg, 2x, 3x, 4x, 5x)
  fa-lg
  fa-2x
  fa-3x
  fa-4x
  fa-5x

Menší

Ale co když potřebujete zmenšit ikony tak, aby odpovídaly vašemu rozvržení, formuláři nebo překryvu na jiné ikony? Fontawesome za to nenabízí kurzy. Protože se však ikony zobrazují jako písmo, můžete přidat jakýkoli CSS, který byste normálně použili pro změnu měřítka písma pro změnu velikosti ikony:

Stačí vytvořit třídu CSS (bez ohledu na úroveň specifičnosti, kterou potřebujete uchopit ikonu / odkaz) a zacílit ji na selektor ikony:

.fa-search {
  velikost písma: 0,5em;
}
 

Fontawesome správně zajímá hodně o dostupnosti. Myslím, že zde je, že něco menší než standardní velikost může způsobit problémy pro některé uživatele a mělo by být použito pouze pro nepodstatné návrhové položky, nikoli pro kritické UX.

Barva

Jednoduše použijte vlastní CSS ve třídě a je dobré jít. Zde uvádíme příklad velikosti písma i barvy na vodorovně převrácené ikoně:

.fa-search {
  velikost písma: 3,0em;
  barva: modrá;
}
 

Samozřejmě můžete použít obvyklé efekty přechodu na změnu barvy a změnu měřítka na přechodu tak, aby se vaše ikony objevily.

Bold / Light

To je místo, kde se otočíme mimo silnici a věci začnou být trochu zaseknuté. Až dosud jsme používali (1) Fontawesome poskytované třídy (2) standardní styly písem z CSS. Nyní přidáme některé z méně kompatibilních fontových efektů prohlížeče a přidáme další přizpůsobení. Ve skutečnosti je od července 2016 toto schéma kompatibility níže uvedených stylů, které všichni používají -webkit-text-mŕtv:

Žádné překvapení, žádné IE. Teď s tím!

Fontawesome nemá odvážnou třídu. A vy byste si nemysleli, že to budete potřebovat. Ale zjistil jsem, že se chci přizpůsobit šířce tahu u několika ikon s různými tahy, aby se lépe koordinovaly. Můžete také chtít koordinovat sousední text, který má silnější nebo tenčí tah než ikonu Fontawesome.

Výše uvedené aplikuje tah barvy pozadí, aby byla ikona tenká, nebo tah barvy písma, aby byla ikona tlustá.

.fa-search {
  -webkit-text-mŕtvice: 2px bílá; /* barva pozadí */
  barva: modrá;
}
.fa-search {
  -webkit-text-mŕtvice: 3px modrá; /* barva fontu */
  barva: modrá;
}

Obrys

Můžete dokonce kombinovat tah a výplň a získat tak obrysový nebo duální barevný efekt:

.fa-search {
  -webkit-text-mŕtvice: 2px modrá;
  -webkit-text-fill-color: azurová;
}

Znovu si pamatujte, že vám to nepřinese kompatibilitu s různými prohlížeči. (Řekl jsem vám, že byste mohli udělat nějaké experimenty s textovými stíny v IE, abyste celou svou aplikaci zrychlili ...)

A je to!

S pomocí vestavěných tříd Fontawesome a vlastního vlastního CSS můžete připravit své ikony.