Fontello i pozycjonowanie elementów na stronie.

pytanie zadane 20 maja 2015 w HTML i CSS przez Jacob99 Obywatel (1,840 p.)

Chciałbym zrobić kafelek, w którym wyświetlałaby się ikonka, a po najechaniu kursorem ikonka by znikała i pojawiałby się tekst; Coś na kształt poprzedniego layoutu bloga miroslawzelent.pl:)
Tu pojawia się moje pytanie, a mianowicie: czy można wykorzystać do tego fontello?
Gdy próbowałem go użyć pojawił się problem, czyli pseudoklasa :before w fontello.css.
Jeśli ona jest to nie mogę ułożyć tekstu pod lub nad ikonką, a jeśli jej nie ma to ikonka się nie wyświetla.
Czy można w takim przypadku wykorzystać fontello, czy jest to niemożliwe i trzeba się posłużyć obrazkami?

2 odpowiedzi

odpowiedź 20 maja 2015 przez KatarzynaGie9 Bywalec (2,500 p.)

ja robiłam z ikonką i działało.

znaj moje dobre serce dam ci gotowca

nie musisz dziękować kwiaty wystarczą XD

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/fontello.css" type="text/css" />
</head>
<body>

<div id="box_1">
<div class="box_zdjecie">
<div class="miniaturka">
<center> <i class="demo-icon icon-smile"></i></center>
</div>
<div id="tlo_efekt"></div>


<a href="" class="link_box">
<div class="lala">JAKIS TEKST<br/> JAKIS TEKST </div>
</a>

</div>


</body>

</html>

CSS:

#box_1 {
width:300px;
height:173px;

float:left;

}

#box_1 .box_zdjecie {
width:300px;
height:173px;
}

#box_1 .box_zdjecie .miniaturka {
position: absolute;
width: 300px;
height:173px;
background-color: aqua;
opacity:100;
padding-top: 20px;
}

#tlo_efekt {

background-repeat:no-repeat;
position: absolute;
width:300px;
height:173px;

}

a.link_box {
position: relative;
z-index: 0;

background-repeat:no-repeat;
color: black;
width: 300px;
height:173px;
display: block;



}
a.link_box:hover {
position: relative;
z-index: 100;

}
a.link_box div.lala {
position: absolute;
width: 0px;
display: none;
left: 0px;
top: 0px;
font: normal 11px verdana;
color: Black;
z-index: 0;
text-decoration:none;
}
a.link_box:hover div.lala {
position: absolute;
width: 280px;
height:173px;
display: block;
visibility: visible;
font-size:20px;
padding:10px;
font-weight:bold;
letter-spacing:-2px;
color:#FFF;
text-align: center;
text-decoration:none;
-moz-opacity: 100;
opacity: 100;
filter: alpha(opacity=100);
z-index: 100;
background-color: red;
}