Social icons (YT, FB etc.) w nagłówku

Cześć,

w jaki najprostszy sposób można dodać tzw. "social icons" do headera forum? Chciałbym aby w prawym górnym rogu headera, pod paskiem nawigacji był widoczny półprzeźroczysty pasek zawierający ikonki z przekierowaniem do YT, FB, Steam itp. Obrazek poglądowy zamieszczam niżej.

   

Pasek mógłby być podobny do tego poniżej (usermenu).
Niestety nie znalazłem do tego żadnego pluginu, a moje umiejętności programistyczne nie stoją na takim poziomie żebym mógł samemu takie coś utworzyć

Adres forum:
http://alpha-team.eu/

Za każdą pomoc będę bardzo wdzięczny.
Pozdrawiam.

Możesz użyć do tego FontAwesome, wyszukaj odpowiednie nazwy tutaj: https://fontawesome.com/icons

Oczywiście, taki też mam zamiar, tylko większą trudnością jest dla mnie utworzenie takiego paska w tymże właśnie miejscu. Jaki kod powinienem dodać, i gdzie?

header możesz dodać nowy div do .topbar albo do jakiegoś istniejącego - Twój wybór.

Potrafię te szablony i css znaleźć, ale niestety na tym kończy się moja wiedza w tym temacie i w tworzeniu divów. Nie chcę na ślepo wklepywać tam bzdur, bardzo bym prosił o dokładniejsze wytłumaczenie jak ma wyglądać taki div, bo sam nie dam rady.

Prosty przykład: https://jsfiddle.net/sb3n3y0k/1/

Prosty przykład: https://jsfiddle.net/sb3n3y0k/1/

Dokładnie o takie coś mi chodziło, dziękuję!

Jest tylko jeszcze jeden mały problem, co zrobić aby oba paski były przesunięte całkiem w prawo? Próbowałem umieścić diva w divie, ale nie otrzymałem zamierzonego efektu.

   

Korzystam z jakiejś starej wersji fontawesome, skoro te ikonki są takie spikselizowane?
Używam np. fa fa-facebook-square fa-fw, bo jak wpisuję fab fa-facebook-square (tak jak widnieje na fa 5.0) to nie wyświetla się ona u mnie prawidłowo. Pewnie musiałbym to wszystko aktualizować, ale szkoda zachodu na 3 ikonki. Reszta jest tak mała że mi to nie przeszkadza.

Za pomoca headerinclude mozesz polaczyc pobrane pliki JS FontAwesome 5 i wtedy automatycznie zamienia sie na nowsze

Próbowałem kilka rzeczy i w zasadzie wszystko poza ujemnym margin-right wymaga przebudowy połowy nagłówka. Więc jeśli nie chce Ci się bawić w przerabianie szablonu, możesz nadać temu paskowi coś w stylu margin-right: -120px

Za pomoca headerinclude mozesz polaczyc pobrane pliki JS FontAwesome 5 i wtedy automatycznie zamienia sie na nowsze

Próbuję to zrobić bez pobierania (Web fonts with CSS). Wtedy zmienia mi ikony na nową wersję, ale wiele z nich przestaje działać. Muszę wtedy szukać każdej z osobna i dopasowywać ich nazwy żeby znów się one wyświetlały? Chcę je zaktualizować tylko dlatego, że w nowszej wersji jest ikona Discord. Może da się wgrać jakoś tylko tę jedną?

Próbowałem kilka rzeczy i w zasadzie wszystko poza ujemnym margin-right wymaga przebudowy połowy nagłówka. Więc jeśli nie chce Ci się bawić w przerabianie szablonu, możesz nadać temu paskowi coś w stylu margin-right: -120px

Pobawiłem się marginem i przesunąłem pasek, dziękuję jeszcze raz.

Za pomoca headerinclude mozesz polaczyc pobrane pliki JS FontAwesome 5 i wtedy automatycznie zamienia sie na nowsze

Próbuję to zrobić bez pobierania (Web fonts with CSS). Wtedy zmienia mi ikony na nową wersję, ale wiele z nich przestaje działać. Muszę wtedy szukać każdej z osobna i dopasowywać ich nazwy żeby znów się one wyświetlały? Chcę je zaktualizować tylko dlatego, że w nowszej wersji jest ikona Discord. Może da się wgrać jakoś tylko tę jedną?

„Tej jednej” nie da sie, tylko musisz polaczyc w headerinclude (niestety) pobrane pliki fa-brands.css i fa-brands.min.css (jakos tak)

@ViewerOfDeadMemes coś chyba jakoś nie tak

@Bansuj Możesz spróbować dodać svg na sztywno:

<span class="discord">
<svg aria-hidden="true" data-prefix="fab" data-icon="discord" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-discord fa-w-14 fa-9x"><path fill="currentColor" d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z" class=""></path></svg></span>

---

https://jsfiddle.net/xeqh4jjb/3/

@ViewerOfDeadMemes coś chyba jakoś nie tak

@Bansuj Możesz spróbować dodać svg na sztywno:

<span class="discord">
<svg aria-hidden="true" data-prefix="fab" data-icon="discord" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-discord fa-w-14 fa-9x"><path fill="currentColor" d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z" class=""></path></svg></span>

---

https://jsfiddle.net/xeqh4jjb/3/

Racja... można tak, ale chyba latwiej miec juz wszyskie ikony fa-brands razem

@ViewerOfDeadMemes bez sensu obciążać stronę całą paczką, skoro będzie używana tylko jedna ikona.

Jeśli ktoś się zastanawia jak przejść z FA4 > FA5: https://fontawesome.com/how-to-use/upgrading-from-4

Zaktualizowałbym wszystkie, ale nie mam pojęcia gdzie te pliki wgrać na FTP. Zrobiłem to sposobem myCreedo, i wygląda zacnie, tylko cały czas jeszcze usiłuję ustawić tą ikonkę Discorda trochę niżej, na równi z innymi.