web-dev-qa-db-fra.com

comment utiliser la police génial dans propre css?

J'utilise bootstrap et Font Awesome. Dans un cours de CSS personnalisé sur lequel je travaille, j'ai essayé d'inclure les icônes Font Awesome au lieu d'utiliser des images. Voici mon code avant Font Awesome.

.data .close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../img/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

.next {
  right: 0;
  float: right;
}

.next:hover {
  background: url(../img/next.png) right 48% no-repeat;
}

Voici mon code utilisant Font Awesome, qui ne fonctionne évidemment pas. Les icônes ne montrent pas. Une idée de ce que je fais mal?

.data .close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  font-family: FontAwesome
  content: "\f00d";
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}


.next {
  right: 0;
  float: right;
}

.next:hover {
  font-family: FontAwesome
  content: "\f054";
}

en-tête HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>test</title>
  <link rel="stylesheet" href="./font-awesome/css/font-awesome.css">
</head>

....

....

voici un violon de ce que je travaille .

css3twitter-bootstrapfont-awesome
11
user2636556

vous pouvez le faire en utilisant le pseudo :before ou :after. en savoir plus ici http://astronautweb.co/snippet/font-awesome/

changez votre code pour cela

.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
   text-decoration: none;
}

.lb-prev:before {
    font-family: FontAwesome;
    content: "\f053";
    font-size: 30px;
}

faites la même chose pour les autres icônes. vous voudrez peut-être aussi ajuster la couleur et la hauteur des icônes. de toute façon voici le violon espérons que cela aide

31
da-hype

L'esprit de la police Web consiste à utiliser le cache autant que possible. Vous devez donc utiliser la version CDN entre <head></head> au lieu de vous héberger vous-même:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Assurez-vous également que vous avez chargé votre CSS APR&EGRAVE;S la ligne ci-dessus, sinon votre police CSS personnalisée ne fonctionnera pas.

Référence: Font Awesome Get Started

7
Raptor

Instructions pour Drupal 8/FontAwesome 5

Créez un fichier YOUR_THEME_NAME_HERE.THEME et placez-le dans votre répertoire themes (c'est-à-dire votre_nom_site/themes/votre_nom_theme).

Collez-le dans le fichier. Il s'agit du code PHP permettant de rechercher le bloc de recherche et de changer la valeur en UNICODE pour l'icône FontAwesome. Vous pouvez trouver d'autres personnages sur ce lien https://fontawesome.com/cheatsheet . 

<?php
function YOUR_THEME_NAME_HERE_form_search_block_form_alter(&$form, &$form_state) {
  $form['keys']['#attributes']['placeholder'][] = t('Search');
  $form['actions']['submit']['#value'] = html_entity_decode('&#xf002;');
}
?>

Ouvrez le fichier CSS de votre thème (c'est-à-dire votre_nom_site/themes/votre_nom_theme/css/styles.css), puis collez-le dans lequel changera tout le texte à envoyer en entrée à FontAwesome. Vous ne savez pas si cela fonctionnera si vous souhaitez également ajouter du texte dans le bouton de saisie, mais cela ne pose pas de problème pour une icône.

Assurez-vous d'importer FontAwesome, ajoutez-le en haut du fichier CSS. 

@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');

puis ajoutez ceci dans le CSS

input#edit-submit {
    font-family: 'Font Awesome\ 5 Free';
    background-color: transparent;
    border: 0;  
}

RASSEZ TOUS LES CACHES ET CELA DEVRAIT FONCTIONNER FIN

Ajouter des effets de police Google

Si vous utilisez également les polices Web de Google, vous pouvez également ajouter des effets à l'icône (voir plus ici https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta ). Vous devez importer une police Web Google, y compris le ou les effets que vous souhaitez utiliser en premier dans le fichier CSS. 

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800&effect=3d-float');
@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');

Revenez ensuite à votre fichier .THEME et ajoutez la classe pour l'effet 3D Float afin que le code ajoute maintenant une classe à l'entrée. Il y a différents effets disponibles. Il vous suffit donc de choisir l’effet souhaité, de modifier le code CSS pour l’importation de la police et de modifier la valeur de FONT-EFFECT-3D-FLOAT dans le code ci-dessous en tant que font-effect-WHATEVER_EFFECT_HERE. Les effets de note sont toujours en version bêta et ne fonctionnent pas dans tous les navigateurs. Veuillez lire ce qui suit avant de l'essayer https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta

<?php
function YOUR_THEME_NAME_HERE_form_search_block_form_alter(&$form, &$form_state) {
  $form['keys']['#attributes']['placeholder'][] = t('Search');
  $form['actions']['submit']['#value'] = html_entity_decode('&#xf002;');
  $form['actions']['submit']['#attributes']['class'][] = 'font-effect-3d-float';
}
?>
2
Nicholas Simon Cronwright