jak wystylizować fontello

Question

Cześć ! mam pewien problem z wystylizowaniem fontello...

mam taki kod HTML:

<div class="kontaktory">
		<p>
			<button onclick="$('.mail').css('display', ($('.mail').css('display')=='none'?'block':'none'))" type="button" class="buttoner">
				<!-- <i class="fas fa-envelope-square"></i> -->
				<i class="icon-mail-alt"></i>
				<!-- <i class="fas fa-envelope"></i> -->
			</button>
			<span class="align-middle">E-mail</span>
			</p>
			<p class="small-text mail" style="display:none;">maciejhancyk15@gmail.com</p>
	<p></p>
	<p>
		<a href="" target="_blank" class="" >
			<i class="icon-facebook-rect-2"></i>
			
		</a>facebook</p>
	<p>
		<a href="" target="_blank" class="text-decoration-none btn linkedin" >
				<i class="icon-linkedin-rect"></i></a> LinkedIn</p>
	
	<p class="small-text">
		<button type="button" class="buttoner" data-toggle="modal" data-target="#contactForm" >
			<!-- <i class="fas fa-paper-plane"></i> -->
			<i class="icon-paper-plane-1"></i></button> Formularz kontaktowy</p>
	</div>

i do tego taki kod z css fontello:

.icon-paper-plane-1:before { content: '\f1d8'; font-size:35px;} /* '' */
.icon-linkedin-rect:before { content: '\f31b'; font-size:55px; } /* '' */
.icon-facebook-rect-2:before { content: '\e808'; font-size:55px; color: #3B5998;} /* '' */
.icon-mail-alt:before { content: '\f0e0';  } /* '' */

I efekt jest taki:

Chciałbym aby button 1 oraz 4 miały zielone tło i aby wszystkie fontello miały równe wysokości i szerokości, jednakże nie mogę do tego dojść. Ustawienie witdh oraz height takich samych dla wszystkich fontello nie daje rady.

Answer 1

To jest kwestia tego, że te dwa obiekty są buttonami, a nie zwykłymi ikonami. Z tym że te ustawienia to chyba są w plikach css opisujących same fontello (fontello.css), bo zmiana paddingów i innych rzeczy nic nie daje, a przyciski można normalnie stylować w css bez problemów.

https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_basic

Łatwiej chyba będzie zrobić po prostu divy (display: block), które będą całe linkami niż dłubać się w przyciski, bo pliki css opisujące fontello są BARDZO rozbudowane.

Answer 2

Witaj!

Wrzuć cały kod HTML i CSS i JS najlepiej na codepen'a, jutro po szkolę postaram się przyjrzeć co w trawie piszczy

Comments

Wybacz, że dopiero teraz, ale w szkole mam sajgon i dopiero co mogłem do tego usiąść...

codepen

---

Nie rozumiem czemu mają służyć te ikonki, mają one być obrazkami na przyciskach? a te przyciski jaką mają pełnić funkcje na stronie? Dobra ale mniejsza, po drugie to polecałbym spróbować korzystać z strony Fona Awesome, nie musimy zmieniać nic z żadnych zewnętrznych plikach(jeżeli chcesz zmienić wysokość to możesz zmienić ją normalnie w pliku css) i ikonki nie powinno się umieszczać pomiędzy <i></i> ponieważ<i>powininno być stosowane do oznaczenia terminu technicznego. Zamiast tego możesz użyć <span></span> nadać mu klasę i stylować ikonki normalnie w swoim pliku css

---

Zrobiłem to trochę inaczej, lecz mam inny nieco problem... wygląda on następująco:

Mianowicie chciałbym aby napisy były obok ikonki...

HTML:

<div id="kontaktory">
		<p><button onclick="$('.mail').css('display', ($('.mail').css('display')=='none'?'block':'none'))" type="button" class="button mt2" style="width: 50px;">
					<i class="fas fa-envelope"></i>
			</button><span class="align-middle">E-mail</span>
		</p>	
		<p class="small-text mail" style="display:none;">email@gmail.com</p>
		<p><a href="" class="button" style="width: 50px;"><i class="icon-facebook-rect-2"></i></a><span class="align-middle">Facebook</span></p>
		<p><a href="" class="button" style="width: 50px;"><i class="icon-linkedin-rect"></i></a><span class="align-middle">Linkdein</span></p>
		<p><button type="button" class="button" style="width: 50px;">
			<i class="icon-paper-plane-1"></i>
	</button><span class="align-middle">Formularz Kontaktowy</span>
</p>
	</div>

CSS:

#kontaktory{
	width: 45%;
	height: 500px;
	float: left;
	color: #FFF !important;
	border: 1px solid red;
	margin: 0 15px;
	padding: 10px 10px;
	display: block;

}
.button {
	border: none;
	color: #FFF;
	padding: 10px 10px;
	text-decoration: none;
	display: block !important;
	background-color: transparent;
	font-size: 40px;
}
.mt2 {
	margin-left: 8px;
}
.align-middle{
	vertical-align: middle !important;
	font-size:18px;
	font-family: sans-serif;
	text-align: center;
	position: absolute;
	left: 100px;	
}

 

---

https://codepen.io/hello-michal/pen/JVopXw - przy pomocy flexa udało mi się osiągnąć zamierzony efekt - jednak mam wrażenie, że trochę pogubiłeś się w tym co robisz, mieszanie ze sobą HTML'a i CSS'a(mam tu na myśli np to

<p><a href="" class="button" style="width: 50px;"><i class="icon-linkedin-rect"></i></a><span class="align-middle">Linkdein</span></p>

)

dodatkowo przyciski w znaczniku<p></p> i mieszanie w to wszystko JS(JQuery)

<button onclick="$('.mail').css('display', ($('.mail').css('display')=='none'?'block':'none'))" type="button" class="button mt2" style="width: 50px;">

Oraz nagminne stosowanie !important to nie są najlepsze praktyki, polecałbym zacząć wszystko od nowa, najpierw uporać się z warstwą prezentacyjną i estetyczną(HTML i CSS) - tak aby efekt był dla Ciebie satysfakcjonujący, oraz żebyś rozumiał co z czego wynika - następnie dodał interakcje(JS). Nie należy mieszać HTML'a, CSS'a i JS'a w jednym dokumencie ponieważ kod staję się mega nieczytelny.

Pozdrawiam i życzę sukcesów w nauce