Ajouter Font-Awesome à un Theme Drupal

Ajouter Font-Awesome à un Theme Drupal

Lundi, Mars 2, 2015

Pour installer dans un theme avec compilateur css comme less ou sass :

Décompresser la librairie Font-awesome dans un dossier 'fonts' à la racine de votre theme bootstrap.

Ajouter le code ci-dessous dans template.php du theme :

function THEME-NAME_preprocess_html(&$vars) {
$filepath = path_to_theme() . '/fonts/font-awesome/css/font-awesome.min.css';
drupal_add_css($filepath, array(
'group' => CSS_THEME,
));
}

dans le bootstrap.less du theme, ajouter cette ligne :

sous // Components
@import "../fonts/font-awesome/less/font-awesome.less";

Dans un fichier less de votre theme (par exemple content.less) vous pouvez utiliser maintenant ce code par exemple :

h1:before {
    .fa-icon();
    content: "\f059";
}

 

Dans un theme avec css classique :

Décompresser la librairie Font-awesome dans un dossier 'fonts' à la racine de votre theme.

Ajouter l'import dans votre fichier .info du theme :
stylesheets[all][] = css/font/font-awesome/css/font-awesome.min.css

dans votre css utiliser :
.maclasse::before {
       font-family: 'FontAwesome';
    content: "\f059";
}

 

Exemple pour remplacer un lien :
a {
                height: 26px;
                width: 25px;
                overflow: hidden;
                font-size: 15px;
                color: #56C8F3;
                display: inline-block;
                margin-left: 5px;
                &:hover {
                    color: #aaa;
                }
                &[title="Modifier"]::before {
                    visibility: visible;
                    content: "\f040";
                    font-family: "FontAwesome";
                    padding-right: 20px;
                    position: relative;
                    left: 6px;
                }
}


 

 

Bienvenue sur le blog !

Il s'agissait au départ d'un recueil de notes donc certains billets sont plutôt succincts.
J'espère que vous y trouverez l'info qu'il vous manque dans votre recherche.
Vos commentaires sont les bienvenus.

Bonne lecture !

Mois / Années

Recherche