Fontface werkt op geen enkele manier

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

.NET Developer / Innovatieve software / Virtual Re

Functieomschrijving Als .Net developer werken aan innovatieve software waar onder andere gebruik gemaakt wordt van Virtual Reality? Bijdragen aan een organisatie waar je uitgedaagd wordt om continu verbeteringen en ontwikkelpunten te ontdekken en door te voeren? Werken in de omgeving Putten? Reageer dan nu voor meer informatie! Het pro-actief aandragen van verbeteringen voor de bestaande applicatie; Ontwikkelen van nieuwe functionaliteiten; Doorvoeren van aanpassingen en wijzigingen; Verantwoordelijk voor koppelingen met andere systemen; Op de hoogte blijven van technische ontwikkelingen. Functie-eisen Hbo werk- en denkniveau; Een afgeronde IT gerelateerde opleiding; Minimaal 1 jaar professionele ervaring als developer; Aantoonbare kennis van C#; Initiatiefrijke

Bekijk vacature »

Jop B

Jop B

05/12/2017 20:26:14
Quote Anchor link
Hallo,


Op een of andere manier wilt de font niet laden. Deze word aangeroepen door de @font-face regel.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
@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

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
[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?
Gewijzigd op 05/12/2017 20:31:41 door Jop B
 
PHP hulp

PHP hulp

24/01/2020 18:56:01
 
Jan Koehoorn

Jan Koehoorn

05/12/2017 20:30:22
Quote Anchor link
Er mist een [ aan het begin van je CSS.
 
Jop B

Jop B

05/12/2017 20:32:25
Quote Anchor link
Beste Jan,

Thanks voor de reactie, excuses dat was een typefout met het invoeren van het topic. Deze staat wel in de css.
 
Jan Koehoorn

Jan Koehoorn

05/12/2017 20:58:27
Quote Anchor link
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)
Gewijzigd op 05/12/2017 20:58:46 door Jan Koehoorn
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.