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

Question

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

Answer 1

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 ;)

Comments

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;
	}
}

 

---

Pokaż jeszcze HTMLa bo trudno powiedzieć.

---

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..

---

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;

---

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

---

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?

---

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ć ;)