Webflow: Korzystanie z Font Awesome

Webflow 2020+

0:00Witaj w kolejnej lekcji jesteśmy na stronie font awesome.

0:02I tak jak ci powiedziałem jest to

0:04alternatywny sposób do umieszczenia ikon w swoich projektach.

0:07Font awesome.

0:07Są to projekt który zawiera wręcz tysiące ikon.

0:10Jest on obecnie najbardziej popularny co

0:12nie znaczy że nie ma fajnej konkurencji i darmowej jest co prawda font awesome darmowy

0:16ale niektóre tylko ikony są darmowe, a część z nich jest płatna.

0:20Tak czy inaczej w tej darmowej bazie znajdziesz naprawdę mnóstwo ikon więc

0:24można wystartować z font awesome i zobaczyć jak wykorzystać go w webflow.

0:29W tym przypadku wybierzemy polecenie download po to żeby serwować samodzielnie

0:33font awesome i dołączyć do naszego projektu.

0:36Wybieramy polecenie download font awesome free i mamy taką paczkę zip którą teraz trzeba rozpakować.

0:42Następnie przejdziemy do naszej strony w

0:44webflow i do jej preferencji czyli wejdziemy do project settings.

0:49Do zakładki fonts wybieramy to polecenie.

0:52Upload i wskazujemy z katalogu rozpakowanego z

0:55folderu web fonts. Fonty które chcemy zainstalować.

0:57Są one w różnych formatach.

0:59I wszystkie te formaty obsługuje webflow.

1:01Możemy wybrać formaty TTF i zobacz, że dla tych formatów TTF mamy, fa brands.

1:06Następnie mamy format fa regular,

1:09i fa solid więc to są tak naprawdę trzy różne warianty które chcemy zainstalować

1:15wybieramy polecenie open teraz. Po zuploadowaniu tych fontów możemy

1:19wybrać polecenie upload font file na wszystkich trzech.

1:23W tym momencie są one już zainstalowane i do użycia fa czterysta, fa brands, i fa solid.

1:28Więc wracamy do naszego projektu i pod przyciskiem dodajemy kolejną rzecz

1:34np. tekst block i teraz ten tekst będziemy chcieli dodać do niego tą strzałke możemy

1:39w zasadzie icon fontów używać na różne sposoby.

1:42Przejdźmy do sekcji ikon najpierw znajdziemy to co nam odpowiada

1:46np. arrow.

1:48Będziemy mieli mnóstwo strzałek jak możemy

1:50wybrać tę która nam pasuje czyli właśnie gdzieś przed chwilą tutaj była.

1:54Gdybyśmy tę arrow right.

1:56Strzałka w prawą stronę i po kliknięciu

1:58to co mamy do dyspozycji to możemy użyć jej jako klasy CSS skopiować sobie HTML.

2:03Możemy ją pobrać możemy skorzystać z

2:05jakiejś wersji pro płatnych ale to co ja zwykle robię to po prostu najeżdżam sobie na tą

2:11strzałka w tym miejscu po to żeby skopiować jej glyph unicode.

2:15Wtedy jak mamy w schowku taki

2:18skopiowaną z strzałkę. Możemy po prostu w polu tekstowym ją w wleić.

2:22No i ten glyph będzie nam działał wtedy

2:24kiedy ta ramka tekstowa będzie oczywiście miała format jako oznaczona jako font awesome.

2:29Więc przejdźmy teraz do sekcji typografii

2:31font i musimy zmienić na jeden z zainstalowanych.

2:34Będzie to dla nas fa solid.

2:36No i mamy strzałeczkę.

2:38Więc font jest poprawnie zainstalowany możemy z niego korzystać właśnie na takiej

2:41zasadzie albo jeśli chcesz sprawdzić inne sposoby w jakie możesz wykorzystać font awesome.

2:46Bo to jest tylko jeden sposób osadzania tych elementów. W ten sposób

2:50możesz osadzić tysiące ikon które znajdują się w bibliotece font awesome.

2:53Natomiast polecam zapoznać się z

2:55wieloma innymi bibliotekami bo jest ich naprawdę mnóstwo.

2:59I o ile część biblioteki font awesome jest płatna

3:01to istnieją bardzo fajne darmowe alternatywy z których możesz skorzystać.

3:06Dodatkowo jeśli jesteś na etapie

3:07projektowania przykładowo xd to oczywiście też możesz zainstalować sobie lokalnie

3:11font awesome po to żeby używać tej biblioteki fontów bezpośrednio w projekcie.

3:16I wtedy wystarczy właśnie kopiować i wklejać te elementy między webflow, a

3:21np. xd, figmą czy sketchem.

3:23Jest to bardzo bardzo wygodne.

3:24Próbujemy teraz stylowo choć potrzebujemy

3:27podkreślenie i zobaczmy dm sans osiemnaście bold. Zobaczmy czy nam się font zgadza.

3:32Tutaj dm sans z osiemnaście bold jest w porządku. Jeszcze dodajemy do niego podkreślenie

3:38czyli w sekcji style decoration. Po prostu dodamy podkreślenie w ten sposób.

3:42No i musimy dodać jakiś konstrukcyjny element który nam to wszystko uporządkuje

3:48czyli możemy wrzucić sobie w DiV blocka i do tego ich DiV blocka wrzucamy przycisk.

3:54text block dwa który znajdzie się pod nim i fajnie by było go nazwać

4:00np. arrow icon.

4:03I kolejno mamy jeszcze tego Div blocka kółeczkiem który pasowałby umieścić tutaj

4:08na początku teraz cały ten DiV block to będzie quote submit.

4:12Sami możemy nazwać kłopot sami na przykład.

4:16No i umieszczamy te elementy w flex boxie, a następnie w wycentrujmy.

4:21W ten sposób już wygląda to całkiem dobrze.

4:24Natomiast potrzebujemy jeszcze skorzystać z marginesów.

4:28Np.

4:29wchodząc na quote forum submit. Zobaczymy jego właściwości i margines z lewej strony.

4:34Możemy stworzyć ujemne w ten sposób, że będzie nachodzić na to kółeczko.

4:41I to samo zrobimy w przypadku marginesu z

4:43prawej strony gdzie możemy w ten sposób przesunąć sobie strzałke.

4:47A gdyby ta strzałka była za duża

4:49np. względem projektu no to pamiętaj, że to jest font w związku z tym my możemy

4:53zmieniać tutaj bez problemu jej rozmiar

4:56np. zmienić go do dwanaście pikseli i odtworzyć

4:58praktycznie idealnie to jak wygląda to w projekcie.

5:01Zadbamy jeszcze o odpowiedni marginesy.

5:03Od tego pola czyli tu mamy dwadzieścia cztery.

5:06Tutaj będziemy mieli trzydzieści dwa może zróbmy sobie

5:08równe ale to zrobimy właśnie na e-mail imput. Zaznacze sobie e-mail imput ma tutaj dziesięć

5:14możemy zrobić dwadzieścia cztery margines od góry i dwadzieścia cztery margines dołu.

5:19Wydaje mi się, że to wygląda całkiem fajnie

5:22zamieszczał oppacity i widać że tutaj jest trzydzieści procent.

5:25oppacity i na tym polu.

5:27Czyli jest to zrobione w ten sposób, że w momencie kiedy użytkownik najedzie na pole

5:32ono dopiero się zapali, a na początku ma trzydzieści procent

5:35oppacity. I można to zrobić

5:38np. email imput wybierając opcję hover czyli

5:41w tej wersji none zrobimy oppacity i tego całego elementu na trzydzieści procent.

5:46wybierzmy tutaj trzydzieści procent,

5:47a po najechaniu czyli w wariancie hover zrobimy sobie oppacity te sto procent.

5:53.

5:53Wróćmy do none. Spróbujmy to teraz podejrzeć.

5:56No i mamy tak jak w projekcie albo

5:58po najechaniu ten element podświetla więc myślę że jest ok.

6:01Ostatnia rzecz którą potrzebujemy zrobić

6:03to dodać tu elementy graficzne które znajdują się w tle.

6:07I te elementy możemy wrzucić

6:09np. na całego forum blocka.

6:11Czyli teraz jako background tło wybierzemy image and gradient.

6:15Spróbujmy to wrzucić jako tło właśnie dla tego elementu . Choose image wybierzemy.

6:20Mam tu taki obrazek background items będę chciał umieścić go centralnie.

6:25Nie chcemy go powielać więc wyłącza opcję tail.

6:29No i teraz jak ma się wyświetlać.

6:31Wybierzemy dla niego opcję contatin.

6:33Wtedy automatycznie też oznaczało się

6:35mapka dwa razy to jest wtedy kiedy importuje obrazki które nie są plikami SVG

6:39na ogół tylko PNG albo JPG-ami. Chcemy zaimportować je w wersji dla retiny.

6:45Czyli dwa razy większej.

6:46To oznaczamy, że przygotowaliśmy ten obrazek w skali dwa razy

6:49i on będzie lepszej jakości na tych urządzeniach retina nie będę w to wnikał.

6:53Ale zapamiętaj proszę że jest to dla tych

6:56elementów które mamy eksportowane w skali dwa które sam bitmapą czyli PNG-em albo JPG-em.

7:01W przypadku plików SVG się tym nie przejmujemy i zawsze to oznaczam.

7:04No i teraz ma to być wycentrowane.

7:06Natomiast ogranicza ten element w wariancie contain wysokość kontenera form block.

7:12Dlatego do kontenera forum block dodamy teraz sobie jakiś padding od góry i od dołu.

7:17Tak żeby to po prostu było bardzo podobne czy zgodne z projektem.

7:21I teraz wydaje mi się że mniej więcej jest ok.

7:23Oczywiście można to jeszcze jakoś dopracować ale jest w porządku.

7:26Mamy tą sekcję gotową zauważyłem że z jakiegoś powodu w nagłówku

7:30miałem złe dane więc z pomocą magii kina szybko przy wróciłem odpowiednie. Zostało

7:34nam dopracowanie w form blocku tych stanów succes i error.

7:38Jeśli przejdziemy do succesu wygląda to tak.

7:40Error wygląda tak w zasadzie ten stan prawdopodobnie można szybko naprawić z

7:44tego powodu że na forum bloku jeśli zastosujemy tutaj mamy direction horyzontal.

7:49Jeśli zastosujemy direction w vertical to już będzie to wyglądało dużo lepiej.

7:54Przejęliśmy się teraz na succes i zobaczmy jak wygląda.

7:56Też jest lepiej.

7:58Natomiast oczywiście trzeba by było to trochę jeszcze do dostylować. Aczkolwiek

8:04nie ma tutaj żadnych trudnych rzeczy to są same te elementy które wykonywaliśmy więc

8:08nie będę cię teraz dokładnie pokazywał tego jak to zrobić.

8:11Natomiast warto jeszcze przestudiować w tym stanie normal.

8:15Jak wyglądają kolejne responsywne.

8:16Breakpoint.

8:18W tabletowym breakpoincie wszystko jest bardzo ładnie.

8:21Znowu zadbali o centrowanie tego elementu więc wszystko ładnie się skaluje w telefonowym

8:26landscape. Zobaczmy jak to wygląda też jest naprawdę super więc możemy to aż do

8:31tego małego layoutu zostawić i zobaczmy czy w tym telefonowym.

8:36No tutaj trzeba było wykonać jakieś

8:38poprawki ale głównie te poprawki w zasadzie dotyczą odstępu, marginesu.

8:43Zobaczmy jak to wygląda. Preview.

8:45No właśnie zobacz, że to powinno po prostu znaleźć się

8:49zdecydowanie wyżej więc musimy zmienić ten margines przejdźmy do jego ustawienia.

8:54Pamięta że dla całego kontentu mamy po ustawiane marginesy i dość duży padding

8:58W związku z tym można by było to pozmieniać. Możemy wyzerować sobie teraz.

9:03Oczywiście tylko dlatego breakpointu i nawet wyzerować sobie padding

9:07i w tym momencie już będzie wyglądało to dużo lepiej i dokładnie tak jak chcemy w

9:11widoku mobilnym i wpłynęło to oczywiście tylko na ten

9:15widok mobilny portretowy, a wszystkie pozostałe już sprawdziliśmy i są ok.

9:19Także to wszystko na teraz.

9:20Do usłyszenia w kolejnej lekcji w której pokażę ci jak zrobić footer.

9:24Pamiętam o tym że chcemy ten formularz obsłużyć ale zrobimy to na końcu kursu.

9:28Przy okazji publikowania. Strony do usłyszenia.