opgelost font awesome-icons naast tekst

font awesome-icons naast tekst

11 nov 2016 13:26 - 11 nov 2016 13:27

Ik probeer met een aangepaste htmlmodule een contactmodule te maken met daarin 3 fontawsomeicons, maar ik krijg die icoontjes niet mooi naast mijn tekst. Ze zweven er zowat linksboven. Zie website linksonder net boven de footer.

Gebruikte htmlcode:

Code:

<div class="hallo">
<div class="pull-left"><i style="font-size:20px;" class="fa fa-map-marker "></i></div>
<div class="hallo-body">
<h4>Adres</h4>
<p>Gravenbos 6<br />8470 Gistel</p>
</div>
</div>
<div class="hallo">
<div class="pull-left"><i style="font-size:15px;" class="fa fa-envelope-o "></i></div>
<div class="hallo-body">
<h4>Email Address</h4>
<p><a href="mailto:info@gravenbos.be">info@gravenbos.be</a></p>
</div>
</div>
<div class="hallo">
<div class="pull-left"><i style="font-size:15px;" class="fa fa-phone-square "></i></div>
<div class="hallo-body">
<h4>Telefoonnummer</h4>
<p>+32 59 27 63 63</p>
</div>
</div>

Gebruikte css in de template:

Code:

.hallo {
    margin-top: 15px;
}

.hallo-body {
    padding: 10px;
    overflow: hidden;

}

.pull-left {
 float: left;

}

Die fontawsomeicoontjes zouden dus mooi naast die tekst moeten komen.

Alvast bedankt

dawebmasta
Heeft onderwerp gestart
Regelmatige bezoeker van Joomla!NL
Berichten: 183

font awesome-icons naast tekst

11 nov 2016 16:22

Zijn diverse mogelijkheden voor.
Dit

Code:

.hallo-body > h4::before {
  content: "\f041";
  font-family: fontawesome;
}

of dit

Code:

.hallo .pull-left {
  padding-top: 20px;
}

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37559

font awesome-icons naast tekst

12 nov 2016 10:18

Code:

.hallo .pull-left {
  padding-top: 20px;
}

Merci, deze code werkte het best!!
Bedankt Astrid

dawebmasta
Heeft onderwerp gestart
Regelmatige bezoeker van Joomla!NL
Berichten: 183

Moderators: Jelle, Romke

Tijd voor maken pagina: 0.622 seconden

Gemaakt door Kunena

Laatste nieuws

Welkom bij Joomla!NL

opgelost font awesome-icons naast tekst

font awesome-icons naast tekst

font awesome-icons naast tekst

font awesome-icons naast tekst

Laatste forumberichten

Wil je Joomla!NL steunen?