Ajouter Font-Awesome à un Theme Drupal
Ajouter Font-Awesome à un Theme Drupal
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 !
Catégorie
Tags
- Androïd
- Apache
- Ardour
- Atom
- bash
- BEM
- Bootstrap
- calDAV
- carDAV
- Casque
- Cheat sheet
- CKEditor
- Commerce
- Compass
- Composer
- CSS
- Docker
- docker4drupal
- Drupal
- Drupal 7
- Drupal 8
- DrupalVM
- Drush
- faderport
- Fancy
- Features
- Font-awesome
- Git
- Github
- GitLab
- GNU
- grid
- Hacking
- htaccess
- html5
- Imce
- Jack
- Javascript
- jplayer
- jQuery
- Lavalamp
- Less
- Lightning
- Linux
- locahost
- memtest usb .img .iso
- Music
- Mysql
- Omega
- owncloud
- Pageant
- Parallax
- php
- phpMyAdmin
- Portainer
- Puphpet
- Putty
- Regex
- Responsive
- Samba
- Sass
- Sécurité
- SEO
- Solcalendar
- Solr
- ssh
- suggestions
- Taxonomy display
- TouchDaw
- Traefik
- Utilitaire
- Vagrant
- vidéo
- VirtualBox
- vlc
- Wamp
- Webform