Hogy tudnék egy ikont hozzáadni egy divhez csak css-sel?
Van egy nagy html dokumentumom, amiben sok div van, aminek ugyanaz a class-sza. Ezeket jól tudom formázni css-sel. Viszont szeretnék mindegyik ilyen div elejére a margóra egy ikont tenni.
Meg lehet ezt tenni anélkül, hogy a html-hez hozzányúlnék? Van erre csak-css megoldás?
válasza:Állíts be a blokknak háttérképet - valahogy így:
.divOsztalya {
background-image: url('ikon.png');
background-repeat: no-repeat;
}
válasza:Szövegként fogja értelmezni a böngésző, ha html-t raksz a content-be.
Képet mondjuk lehet megadni a content-nek, de ha háttérként adod meg, akkor még méretezni is tudod:
.lista::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-image: url('ikon.png');
background-size: 20px 20px;
background-repeat: no-repeat;
}
Köszönöm a válaszaitokat, végül a háttérképként beszúrás működött.
Nem teljesen olyan lett, amit szerettem volna, de ez is jó.
A div úgy néz ki, hogy van egy 5%-os jobb margó és a jobb oldali keret vastag vonal (ez jelöli a dokumentum adott részeit).
{border-right: thick solid black; margin-right: 5%; display: block;}
Ide szerettem volna a vonal jobb oldalára, tehát a margón kívülre tenni a ikont. Ezzel viszont nyilván csak a diven belülre, tehát a vonal bal oldalára sikerült:
{background: transparent url("../images/logo.png") no-repeat top right; background-size: 45px 39px;}
Esetleg megoldható az is, hogy a diven kívülre, de a divhez legyen pozícionálva?
válasza:Pocsék a fantáziám, de igen, meg lehet változtatni az ikon helyét.
.lista{
position: relative;
}
.lista::before{
position: absolute;
left: -10px;
}
A .listának relatív pozíciót adunk, az .lista::before-nak pedig abszolút pozíciót, így az ikon a .lista elemhez igazodva mozdul el, nem pedig az ablakhoz képest.
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!