FontAwesome.io icon vergroten

[Verwijderd]

Hey mensen,

(weer een vraag hier, ja dat klopt.)

Ik heb met font awesome een paar icons op mijn website gezet en in een div element gezet. Nu is het probleem dat ze klein zijn, ik wil ze vergroten met behulp van dit: (staat op hun website)

HTML:

<i class="icon-desktop icon-4x"></i>

Maar er gebeurd niks. Hoe kan ik ervoor zorgen dat het icoontje toch wordt vergroot?

Alvast bedankt,

Niels

[ Voor 1% gewijzigd door RobIII op 30-08-2013 19:22 . Reden: Code tags toegevoegd ]

[TERW_DAN]

Heb je die class ook in je CSS file staan? Anders zal dat natuurlijk weinig uithalen.

[Verwijderd]

Jep, zat er al in.

[RobIII]

Maak eens een jsfiddle zodat we kunnen zien wat je doet Nu is 't gewoon koffiedik kijken, en als ik 't probeer werkt 't gewoon wel.

Sowieso is het handig als je een (uitgeklede!) testcase / code post (gebruik dan wel code tags, die ik nu in je topicstart heb toegevoegd). Zorg er dan wel voor dat we door de bomen 't bos nog kunnen zien. En, zoals je ziet in mijn voorbeeldje hierboven, is een testcase simpel zat op te zetten. Werkt 't bij jou niet dan ga je kijken wat de verschillen zijn en naar je bestaande situatie toe werken in kleine stapjes, net zolang tot 't "stuk" gaat: het laatste stapje bevat je probleem. Nu kun je gaan troubleshooten.

[ Voor 157% gewijzigd door RobIII op 30-08-2013 19:23 ]

[Verwijderd]

Oke, zal ik op letten ben ook maar net een kleine 2/3 weken lid.

Dit is de jsfiddle: http://jsfiddle.net/Ni3l55/6cXDz/

(kleine vierkantjes in de blauwe cirkels zijn de icoontjes, heb het hele pakket van fontawesome niet in het jsfiddle gezet dit is ongewijzigd gebleven.)

[Xaero]

Heb je wel de hele fontawesome css meergenomen? Of in ieder geval de icon-4x class?;-)

http://jsfiddle.net/6cXDz/1/
Hier doet ie het wel namelijk (na het toevoegen van de fontawesome css)

Cascading Stylesheet:

.icon-4x {
  font-size: 4em;
}
.icon-4x.icon-border {
  border-width: 4px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

[ Voor 32% gewijzigd door Xaero op 30-08-2013 20:36 ]

[Verwijderd]

DIt heb ik idd niet in mijn css gedaan, maar na dit hebben toegevoegd gebeurd er nog helaas niks.

[RobIII]

Verwijderd schreef op vrijdag 30 augustus 2013 @ 20:30:
Oke, zal ik op letten ben ook maar net een kleine 2/3 weken lid.

Dit is de jsfiddle: http://jsfiddle.net/Ni3l55/6cXDz/

Hoe is dit een uitgeklede testcase (waar ik specifiek om vroeg)? Ik zie niets dan een shitton aan divjes en andere zooi die totaal niet relevant zijn om je probleem te reproduceren. Dit is een uitgeklede testcase en mensen die je proberen te helpen hoeven zich niet door een oerwoud aan CSS en HTML heen te worstelen om 't eigenlijke probleem te zien.

Overigens: je weet dat je een id maar 1 keer mag gebruiken op een pagina? Als je een stijl op verschillende elementen wil toepassen gebruik je een class, niet een id Ik zie zo, op 't oog, al meteen dat je topbox, leftbox en circle 3 keer gebruikt. Een id hoort binnen een pagina uniek te zijn.

Verwijderd schreef op vrijdag 30 augustus 2013 @ 20:30:
heb het hele pakket van fontawesome niet in het jsfiddle gezet dit is ongewijzigd gebleven.)

Daar gaat 't nou toch juist net om? Je ziet in mijn fiddle toch dat 't werkt? En in de jouwe werkt 't ook als je de stylesheet er in zet.

Verwijderd schreef op vrijdag 30 augustus 2013 @ 20:45:
DIt heb ik idd niet in mijn css gedaan, maar na dit hebben toegevoegd gebeurd er nog helaas niks.

En je zit niet naar een cached versie te kijken? Heb je een keer CTRL-F5 gedaan of gewoon je browser cache leeggemaakt? Je weet zeker dat de juiste CSS geladen wordt? Al eens in de developer tools* gekeken?

* Firebug/IE F12 Dev.tools/Chrome Dev.tools/Safari Dev.tools/Opera Dragonfly

Je fiddle gaat sowieso natuurlijk niet werken (dat zie je alleen al aan de images die niet laden) omdat je allerlei relatieve paden gebruikt (zoals font/fontawesome-webfont.eot?v=3.2.1) die op jsfiddle.com natuurlijk niet bestaan. Die bestanden gaan daar natuurlijk niet gevonden worden en dus niet geladen en dus heb je een waardeloze testcase want het toont helemaal niets noch iets dat gelijkend is op je probleem dat je ervaart in je eigen dev/test-omgeving. Maak daar absolute paden van (http://domein.nl/foo/bar/blaat.css) of gebruik de CDN zoals in de "getting started" beschreven staat zoals ik dat doe in mijn fiddle (kijk onder "external resources" aan de linkerkant).

[ Voor 22% gewijzigd door RobIII op 30-08-2013 21:47 ]

[Verwijderd]

Het is gelukt! bij een div element voor @font-face had ik niet afgesloten met } . Nu werkt het.
Bedankt allen!

@Roblll,

Ik zal de volgende keer wat duidelijker zijn. Thx voor de tips!