Hallo,


Op een of andere manier wilt de font niet laden. Deze word aangeroepen door de @font-face regel.

@font-face {
  	font-family:'iconjop';
	src:  url('../font/iconjop.eot');
  	src:  url('../font/iconjop.eot#iefix') format('embedded-opentype'),
    	url('../font/iconjop.ttf') format('truetype'),
    	url('../font/iconjop.woff') format('woff'),
 	url('../font/iconjop.svg#sociconregular') format('svg');
  	font-weight: normal;
  	font-style: normal;
}


De file staan een map erboven en dan in de map font.

Vervolgens wil ik de font gaan gebruiken


[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "iconjop" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-Minicart{
	float: right;
	font-size: 32px;
	position: relative;
	top: 32px;
	right: 32px;
	width: 46px;
	height: 32.2px;
}

.icon-Minicart:before {
  	content: "\e900";
  	color: #006dd3;
}


Helaas weergeeft de browser geen icoontjes:(

Kan iets dit tegen houden op een of andere manier?
Er mist een [ aan het begin van je CSS.
Beste Jan,

Thanks voor de reactie, excuses dat was een typefout met het invoeren van het topic. Deze staat wel in de css.
In dat geval zou ik eens wat verschillende settings voor dat relatieve pad uitproberen. Staan de fontbestanden wel op de goede plek?

Probeer eens een absoluut pad vanaf je webroot (dus beginnen met /)

Nog een tip: kijk eens of een andere css selector wél werkt, dus bijv gewoon een h1 of een p.

Andere tip, probeer die CSS selectors eens te scheiden? De eerste is waarschijnlijk overbodig, want de tweede selecteert sowieso alles wat die class bevat. (Misschien nog even kijken wat er gebeurt als je die spatie weghaalt)

Reageren