Je cherche quelque chose comme ça

@font-face {
  font-family: "FontAwesome";
  font-weight: normal;
  font-style : normal;
         src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
         src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
               url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
               url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
               url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
               url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}

.myClass:before {
    font-family: FontAwesome;
    content: "\f024";
}
<a class="myClass" href="#">This is a link</a>

Je veux charger le fichier de police en utilisant la propriété CSS. Et pour créer une classe personnalisée pour l'icône de police. Ce qui précède n'a pas fonctionné. Il n'a pas réussi à charger l'icône respective. Au lieu de cela, il montre la barre

3
ranjith 19 avril 2017 à 16:54

3 réponses

Meilleure réponse

Essayez d'ouvrir la console Javascript et d'ajouter les messages d'erreur qui y apparaissent à votre question.

Quand j'ai essayé votre code dans JSFiddle, il suffisait que les liens maxcdn soient basés sur SSL HTTP Liens S par opposition aux liens HTTP non sécurisés.

Cela peut être la solution à votre problème, mais c'est difficile à dire sans la sortie d'erreur de la console.

@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
       src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
       src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
             url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
             url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
             url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
             url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}

.myClass:before {
    font-family: FontAwesome;
    content: "\f024";
}
12
Michael 19 avril 2017 à 14:09

Si vous recherchez FontAwesome, vous recherchez probablement ceci-

<link rel="stylesheet" id="champion-fontawesome-css" href="wp-content/themes/bla/inc/font-awesome-4.7.0/css/font-awesome.min.css?ver=4.7.3" type="text/css" media="all">

Si vous cherchez à charger une police personnalisée de votre choix, essayez ceci-

@font-face {
    font-family: 'FFDINRoundWebPro';
    font-weight: normal;
    font-style: normal;
    src: url('assets/fonts/3103D9_0_0.eot');
    src: url('assets/fonts/3103D9_0_0.eot?#iefix') format('embedded-opentype'), url('assets/fonts/3103D9_0_0.woff2') format('woff2'), url('assets/fonts/3103D9_0_0.woff') format('woff'), url('assets/fonts/3103D9_0_0.ttf') format('truetype');
}

@font-face {
    font-family: 'FFDINRoundWebPro';
    font-weight: 700;
    src: url('assets/fonts/3103D9_1_0.eot');
    src: url('assets/fonts/3103D9_1_0.eot?#iefix') format('embedded-opentype'), url('assets/fonts/3103D9_1_0.woff2') format('woff2'), url('assets/fonts/3103D9_1_0.woff') format('woff'), url('assets/fonts/3103D9_1_0.ttf') format('truetype');
}

@font-face {
    font-family: 'FFDINRoundWebPro';
    font-weight: 500;
    src: url('assets/fonts/3103D9_2_0.eot');
    src: url('assets/fonts/3103D9_2_0.eot?#iefix') format('embedded-opentype'), url('assets/fonts/3103D9_2_0.woff2') format('woff2'), url('assets/fonts/3103D9_2_0.woff') format('woff'), url('assets/fonts/3103D9_2_0.ttf') format('truetype');
}

@font-face {
    font-family: 'FFDINRoundWebPro';
    font-weight: 300;
    src: url('assets/fonts/3103D9_3_0.eot');
    src: url('assets/fonts/3103D9_3_0.eot?#iefix') format('embedded-opentype'), url('assets/fonts/3103D9_3_0.woff2') format('woff2'), url('assets/fonts/3103D9_3_0.woff') format('woff'), url('assets/fonts/3103D9_3_0.ttf') format('truetype');
}

Comme vous pouvez le voir, pour chaque poids de police, je crée un autre @ font-face avec le même nom de famille de polices.

-4
Netanel Perez 19 avril 2017 à 14:03

Utilisez le lien cdn pour créer @font-face comme suit

@font-face {
  font-family: "FontAwesome";
  font-weight: normal;
    font-display: auto;
  font-style: normal;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2") format("woff2");
}
1
KARTHIKEYAN.A 7 nov. 2018 à 11:12