TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Widget 4 Font Awesome Icons pour le site Weebly

74

Le widget Icônes permet de créer un panneau d’appel à l’action accrocheur et d’afficher tout type d’informations. Comme il existe d’énormes jeux d’icônes disponibles gratuitement à partir de diverses ressources, il est facile de présenter les informations nécessaires en utilisant une seule icône attrayante au lieu de décrire avec un texte plus long. Les icônes de police en particulier sont une très bonne alternative aux images dans ce contexte. Dans cet article, explorons le processus de création d’un widget d’icônes de police génial pour le site Weebly.

Vous trouverez ci-dessous le widget (style 1) comportant 4 icônes et vous pouvez ajouter ou supprimer les icônes selon vos besoins.

Présentons encore trois autres styles avec des variations :

Cliquez sur le bouton de téléchargement ci-dessous pour obtenir le code complet pour tous les styles de widget de panneau d’icônes. Et lisez la suite pour savoir comment ajouter ces widgets sur votre site Weebly.

Création d’un widget d’icônes pour le site Weebly

Prenons un exemple de création d’un widget « Nous contacter » avec les quatre options suivantes :

  • Envoyer un e-mail
  • Appelez-nous
  • Discuter maintenant
  • Visiter le forum

Il s’agit d’un widget CSS pur où nous convertissons une simple liste en un widget d’icônes à l’aide d’icônes de police géniales. Chaque widget d’icônes contient les parties suivantes :

  • Conteneur de panneaux (il contient les 4 éléments)
  • Colonne – contient un élément individuel
  • Article – contenant une icône et un titre
  • Icône – icône géniale de la police
  • En-tête H2 qui utilise par défaut le style de l’élément de titre Weebly.

Étape 1 – Définition des styles pour le widget d’icônes

Tout d’abord, nous définissons la largeur de la colonne à 21% afin que 4 éléments puissent tenir sur la largeur de votre thème Weebly. Nous avons supprimé les puces dans les listes avec la propriété "list-style:none" et chaque élément de liste aura une marge (en bas et à gauche) avec un flottement à gauche. Vous pouvez modifier tous ces styles en fonction de votre mise en page. Notez que nous avons utilisé la marge 20px pour créer un espace entre les éléments de la liste.

/* Individual Column */ .column { display:inline-block; float:left; margin:0 0 20px 20px; list-style:none; width:21%; }

Ensuite, nous créons des panneaux avec une couleur d’arrière-plan commune comme « vert clair » ainsi que des styles pour les éléments de liste (ul et li). Nous utilisons "border-radius:10px;" pour créer un coin arrondi pour les panneaux, supprimez cette ligne si vous souhaitez afficher des icônes carrées.

/* Panel */ #panel { position:relative; z-index:1; } #panel ul li { text-align:center; border:1px solid; } #panel ul li *{ margin:0; padding:0; } #panel ul li .icon { margin-bottom:28px; } #panel ul li article { display:block; padding:30px 0 15px 0; } #panel ul li { color:#464646; background-color: lightgreen; border-color:#D7D7D7; border-radius: 10px; } #panel ul li a { color:inherit; } #panel ul li:hover a { color:#51C4BE; }

L’étape suivante consiste à définir les styles des icônes de police géniales comme ci-dessous. Nous avons utilisé la largeur et la hauteur des boutons d’icône à 130px, le rayon de la bordure à 50% pour les faire cercle et la taille de l’icône à 46px. Vous pouvez supprimer le rayon de la bordure pour rendre les icônes au format carré et augmenter/diminuer la taille de la taille de l’icône en modifiant l’attribut de taille de police.

/* Button */ .icon { display:inline-block; } .icon i { position:relative; width:130px; height:130px; line-height:130px; z-index:1; } .icon i, .icon i::after { border-radius:50%; } .icon .fa { font-size:46px; } .icon i::after { position:absolute; top:15px; right:15px; bottom:15px; left:15px; border:1px solid; content:""; z-index:-1; } .icon i { color:#FFFFFF; background-color:#51C4BE;/* IE9 Fallback */ background:linear-gradient(to top right, #256D6A, #51C4BE); } .icon i::after { border-color:rgba(255,255,255,.5); } .icon:hover i::after { background-color:#51C4BE; } #panel ul li:hover .icon i { text-shadow:0 1px 0 #CCCCCC,0 2px 0 #333333,0 1px 0 #BBBBBB,0 4px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25) } #panel ul li:nth-child(1):hover .icon i::after { background-color:#F9CD36; /* Yellow */ } #panel ul li:nth-child(2):hover .icon i::after { background-color:#FF7659; /* Orange */ } #panel ul li:nth-child(3):hover .icon i::after { background-color:#9771BD;/* Purple */ } #panel ul li:nth-child(4):hover .icon i::after { background-color:#F36174;/* Red */ }

Les couleurs jaune, orange, violet et rouge sont utilisées pour la couleur de survol des icônes qui peuvent également être modifiées selon vos besoins. La dernière étape de la partie CSS du widget consiste à ajouter des requêtes multimédias pour rendre le widget réactif sur les appareils mobiles.

/* Media Queries */ @media screen and (max-width:750px){ #panel ul li { display:inline-block; float:left; width:48.46625766871166%; margin:0 3.06748466257669% 15px 0;} #panel ul li:nth-child(even){ margin-right:0; clear:right; } } @media screen and (max-width: 450px){ #panel ul li { display: block; float: none; width: 95%; } }

Étape 2 – Ajout de CSS dans le site Weebly

Vous pouvez télécharger la source complète du fichier CSS nommé « icons_style.css » et télécharger sur votre site Weebly sous « Thème > Modifier HTML / CSS > Actifs » (vous pouvez également télécharger le fichier dans la section « Styles »). Le chemin du fichier téléchargé de votre fichier CSS sera «http://votresite.com/files/theme/icons_style.css ». En plus de ce fichier CSS, nous avons également besoin d’un fichier CSS de police génial et vous devez lier les deux fichiers sur la page requise.

Télécharger le fichier dans l’éditeur de code Weebly

Allez maintenant sur la page sur laquelle vous souhaitez ajouter le widget et liez les deux fichiers CSS comme ci-dessous dans la section «Pages > Choisissez votre page > Paramètres SEO > Code d’en-tête ».

Ajouter un code d’en-tête dans la page

<link href="/files/theme/icons_style.css" rel="stylesheet" type="text/css" media="all"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Étape 3 – Ajout de HTML

La dernière étape consiste à ajouter le code HTML requis dans l’ élément " Embed Code " sur votre page Weebly. L’exemple ci-dessus est couvert dans "Icons Widget 1.html" que vous pouvez obtenir à partir des fichiers source téléchargés. Faites un clic droit et copiez le code HTML source et collez-le dans l’élément « Intégrer le code ». N’oubliez pas de supprimer les deux premiers liens CSS du code source HTML qui sont utilisés à des fins de démonstration. Le code HTML devrait ressembler à ci-dessous :

<div id="panel"> <ul> <li class="column"> <article><a class="icon" href="#"><i class="fa fa-envelope"></i></a> <h2><a href="#">Send Email</a></h2> </article> </li> <li class="column"> <article><a class="icon" href="#"><i class="fa fa-phone"></i></a> <h2><a href="#">Call Us</a></h2> </article> </li> <li class="column"> <article><a class="icon" href="#"><i class="fa fa-comments"></i></a> <h2><a href="#">Chat Now</a></h2> </article> </li> <li class="column"> <article><a class="icon" href="#"><i class="fa fa-group"></i></a> <h2><a href="#">Visit Forum</a></h2> </article> </li> </ul> </div>

Widget d’icônes de personnalisation

Tous les styles requis sont définis dans le fichier "icons_style.css" que vous pouvez personnaliser selon vos besoins. Nous avons ajouté trois autres exemples dans le téléchargement de la source où nous avons utilisé des styles en ligne pour modifier les éléments requis en conservant le « icons_style.css » tel quel.

  • Utilisez Icon Widget 2.html pour des arrière-plans différents pour chaque panneau.
  • Essayez Icon Widget 3.html pour les panneaux de fond blanc avec différentes icônes de couleurs dégradées.
  • Utilisez Icon Widget 4.html avec des icônes sociales sans bordure de panneau.

Vous pouvez modifier le texte / les icônes en HTML et consulter la liste des icônes de police géniales pour choisir l’icône dont vous avez besoin.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails