• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak zastąpić w ccs tekst na przykład ikoną z font awesome ?

VPS Starter Arubacloud
0 głosów
336 wizyt
pytanie zadane 10 sierpnia 2017 w HTML i CSS przez rice Początkujący (440 p.)
Witam.

Czy można jakoś zastąpić tekst w menu głównym za pomocą css na ikoną font awesome przedstawiającą domek ?? Chodzi mi tu na przykład że podczas skalowania strony napis "strona główna" i nie mieści się w jednej linii przez co menu trochę traci na wyglądzie..

Dziki wielkie za pomoc jak i informację.
Pozdrawiam,
Patryk

1 odpowiedź

0 głosów
odpowiedź 10 sierpnia 2017 przez rafal.budzis Szeryf (85,340 p.)

Możesz ukrywać i pokazywać elementy poprzez właściwość display:none; i display:block; lub display:inline;

Aby wykonać zmianę tych właściwości dla określonych rozdzielczości użyj media queries ;)

komentarz 29 sierpnia 2017 przez rice Początkujący (440 p.)

mam tylko jeden problem z tym. mianowicie chodzi o to że mam klasę aktywny która pokazuje aktywną pozycję w menu i teraz jeśli ukryje tek za pomocą display:none; i stworzę regułę dla FontAwesome by pokazała mi się ikonka domku to znów nie aktywuje się dla ikonki domku klasa aktywny. można to jakoś naprawić ? o to cały kod mojego menu..

/* +++++++ MAIN MENU +++++++ */
.mainMenu{
    padding-bottom: 22px;
    width: 100%;
    margin: 0 auto;
}

.mainMenu ul {
    background-color: #3e82c7;
    list-style: none;
    display: flex;
    text-align: center;
    border-radius: 14px;
}

.mainMenu li {
    flex: 1
}

.mainMenu a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 22px 4px;
    font-size: 18px;
}

.mainMenu a:hover {
	color: #3E82C7;
	background-color: #93C0EE;
	transition: 2s;
    padding: 22px 4px;
}

.mainMenu li:first-child > a:hover {
	border-top-left-radius: 14px;
	border-bottom-left-radius: 14px;
}

.mainMenu li:last-child > a:hover {
	border-top-right-radius: 14px;
	border-bottom-right-radius: 14px;
}

.mainMenu .active {
	background-color: #93C0EE;
	transition: 2s;
    padding: 22px 0;
	border-top-left-radius: 14px;
	border-bottom-left-radius: 14px;
	text-shadow: 11px black;
}

@media (max-width: 900px) {
	

	.mainMenu li:first-child a {
		display: none;
	}
	
	.mainMenu li:first-child:after {
		content: "\f015";
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		font-size: 40px;
		line-height: 66px;
	}
}

 

komentarz 29 sierpnia 2017 przez rafal.budzis Szeryf (85,340 p.)
Pokaż jeszcze HTMLa bo trudno powiedzieć.
komentarz 30 sierpnia 2017 przez rice Początkujący (440 p.)

jeśli Ci to nie będzie przeszkadzać wsadziłem cały kod tyczący się menu na codepen.. Jak widać po ukryciu napisu i podstawieniu font awesome przy pierwszej opcji menu przestaje ona reagować na zaznaczenie czy nie działa z nią klasa aktywny..

komentarz 30 sierpnia 2017 przez rafal.budzis Szeryf (85,340 p.)
klase active dodawaj do LI nie do A i problem z głowy.

Przy okazji możesz usunąć border-radius przy klasie aktywnej ponieważ rogi możesz przyciąć w UL ;) Wystarczy ze do UL dopiszesz overflow: hidden;
komentarz 30 sierpnia 2017 przez rice Początkujący (440 p.)

klase active dodawaj do LI nie do A i problem z głowy.

możesz i powiedzieć jak mam to zapisać bo mi to nadal nie działa to sadangry

1
komentarz 1 września 2017 przez rice Początkujący (440 p.)
musiałem się przespać z problemem by zrozumieć o co chodzi.. niby taka błahostka, a jednak nie pomyślałem o tym że miałeś na myśli zmiany w HTML a nie w CSS.. :D

 

mam jeszcze jedno pytanie.. jak teraz zrobić interakcję domku żeby zachowywał się jak inne elementy menu.. tzw. żeby zmienił swój kolor po zaznaczeniu np. z białego na czerwony?
komentarz 1 września 2017 przez rafal.budzis Szeryf (85,340 p.)

Może łatwiej bedzie pozmieniać w HTMLu
 

<li>
<a class="hideOnMobile"  href="#">Strona główna</a>
<a class="showOnMobile" href="#"><span class="ikonka"></span></a>
</li>

Mając takie same znaczniki <a> nie będziesz musiał nic dodatkowego robić ;) 

Podobne pytania

0 głosów
2 odpowiedzi 1,333 wizyt
pytanie zadane 3 września 2017 w HTML i CSS przez xdmik23 Gaduła (3,000 p.)
0 głosów
0 odpowiedzi 132 wizyt
0 głosów
1 odpowiedź 181 wizyt
pytanie zadane 7 kwietnia 2019 w HTML i CSS przez Dru Nowicjusz (180 p.)

93,008 zapytań

141,975 odpowiedzi

321,255 komentarzy

62,350 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...