4 façons d'incorporer une police impressionnante dans l'interface utilisateur Telerik pour ASP.NET AJAX

 < head   runat  =  "server" >   [19659006]    < title > </  title > 

 </  head > 

Résultat dans le navigateur:

Ce n'est qu'une façon de le faire. Vous pouvez trouver plus de détails sur l'intégration de FontAwesome dans RadButton dans Utilisation d'icônes Font Awesome avec RadButton .

Tirez parti de la propriété CssClass pour apporter l'icône de police dans RadLabel

C'est un moyen assez pratique, mais elle n'est applicable que pour certains des contrôles Telerik car la propriété CssClass s'applique normalement à l'élément wrapper du contrôle.

Remarque: Gardez à l'esprit que par défaut les skins Telerik intégrés seront sera chargé comme dernière référence dans la balise et remplacera la famille de polices fournie avec le kit Font Awesome. En conséquence, l'icône de police souhaitée ne sera pas appliquée. Pour éviter cela, nous pouvons définir la propriété EnableEmbeddedSkins de RadControl sur false et laisser les styles Font Awesome prendre effet.

Vous pouvez également conserver les skins intégrés mais vous assurer que les styles Font Awesome sont chargés après ceux de Telerik en plaçant la balise de script avec le code du kit à la fin de au lieu de dans .

Markup:

 < telerik: RadLabel   ID  =  "RadLabel2"   runat  =  "server"   Text  =  " RadLabel "  EnableEmbeddedSkins  = " false "  CssClass  = " fas fa-smile-wink "> </  telerik: RadLabel  > 

Résultat:

Introduire l'icône Font Awesome dans RadMenu en utilisant les pseudo éléments

Dans certains scénarios, l'approche de base n'est pas applicable en raison du HTML structure rendue par certains des contrôles Telerik les plus complexes. Ensuite, l'approche avancée pour inclure Font Awesome est pratique. Elle est bien décrite ici: Font Awesome – CSS Pseudo-éléments .

Remarque: Les approches de base et avancées conduisent pratiquement au même résultat: CSS appliquant les paramètres de police et la valeur du contenu.

Avec l'approche de base, les icônes de police sont chargées en tant que ressources Font Awesome et nous devons uniquement utiliser le nom de classe prédéfini correct. Dans l'approche avancée, nous devons écrire nos règles CSS. Découvrez les styles appliqués automatiquement au RadLabel dans la capture d'écran de la section précédente.

Apportons une icône de police dans un MenuItem dans un RadMenu.

Nous pouvons utiliser la propriété CssClass pour définir un nom de classe personnalisé qui nous aidera à appliquer l'icône à l'élément souhaité uniquement.

Déclaration:

 < telerik: RadMenu   ID  =  "RadMenu1"   runat  =  "serveur" >   
    < Items >    
    < telerik: RadMenuItem   Text  =  "bag"   CssClass  =  "shoppingBag"   />    
    < telerik: RadMenuItem   Texte  ] =  "Item 2"   CssClass  =  "item2"   />    
    <  telerik: RadMenuItem   Text  =  "Item 3"   CssClass  =  "i tem3 "  />    
    </  Items >    
   </  telerik: RadMenu > 

Dans le navigateur, utilisez DevTools pour définir l'élément DOM à styliser. Nous aurions besoin d'un sélecteur suffisamment spécifique pour nous assurer que notre CSS personnalisé prendra effet et s'appliquera uniquement aux éléments désirés.

CSS pour introduire la police- icône:

 .RadMenu .shoppingBag> .rmLink.rmRootLink {  
    famille de polices :  "Font Awesome 5 Free" [19659023];    
    font-weight :  900 ;    [19659006]  }   
   .RadMenu .shoppingBag> .rmLink.rmRootLink: avant {  
    contenu :  " f290" ;    



  


               




  } 

Apparence obtenue:

Utilisez le pseudo-élément ents pour modifier les icônes intégrées dans les boutons de commande de RadGrid

Les icônes de police intégrées dans les contrôles Telerik sont placées dans le pseudo élément :: before . Afin de les remplacer par des icônes Font Awesome, nous devons nous assurer que nous appliquons un CSS personnalisé avec des sélecteurs suffisamment «puissants» pour remplacer l'icône intégrée.

Tout d'abord, nous devons définir l'élément HTML contenant l'icône incorporée, puis utiliser les sélecteurs CSS appropriés pour remplacer l'apparence par défaut.

Inspecter l'icône incorporée et définir les sélecteurs:

Nous pouvons effectuer un changement en direct à l'aide des outils de développement pour trouver le meilleur ajustement:

Une fois que nous le savons , nous pouvons l'appliquer sur la page avec quelques lignes de CSS:

 .RadGrid .t-font-  icon  .rgIcon.rgDelIcon: before {  
    famille de polices :  "Font Awesome 5 Free" ;    
    content [19659023]:  " f044" ;    
  } 

Résultat:

En utilisant les pseudo-éléments et l'approche ci-dessus, nous pouvons styliser les icônes de polices incorporées dans n'importe quel contrôle Telerik. Pour en savoir plus sur le style des boutons RadGrid, consultez Utilisation de Font Awesome dans les boutons RadGrid .

Remarque: Les icônes font partie de la famille de polices afin que nous puissions modifier leur taille et leur couleur. tout comme il est fait avec le texte normal.

Icônes empilées dans RadButton

Font Awesome est génial et fournit un moyen agréable de placer une icône sur une autre pour obtenir une icône significative plus complexe.

Nous utilisons les icônes empilées à l'intérieur d'un RadButton:

Voici comment nous avons réalisé le bouton illustré ci-dessus:

 < style >   
    .hidden {   
    display: none;    
   }    
   
    .fa-stack. cornered-tr {   
    position: absolue;    
    haut: 0px! important;    
    text-align: right;    
    hauteur de ligne: 1em;    
    text-shadow: 1px 1px 1px # 000;    
   }    [19659006]   </  style >   
   
   < script  >   
    function onClientClicked (sender, args) {   
    var checkIcon = $ ('. checkIcon');    
    checkIcon.toggleClass ("hidden");    [19659006]   }    
   </  script >   
   
   < telerik: RadButton   ID  =  "RadButton1"   runat  ] =  "server"   AutoPostBack  =  "false"   OnClientClicked  =  "onClientClicked" >   
    < ContentTemplate >    
    < span   class  =  "fa-stack fa-lg" >    
    < i   class  =  "far fa-user fa-stack-2x" > </  i >    
    <  i   class  =  "fas fa-check fa-stack-1x cornered-tr checkIcon hidden"   style  =  "color: lightgreen"  > </  i >    
   </  span >   
    </  ContentTemplate >    
   </  telerik: RadButton > 

Rechercher Pour en savoir plus sur les icônes empilées, cliquez sur le lien suivant: Font Awesome – Icônes empilées

Si cela ne vous suffit pas, voyez ce qui peut être réalisé avec la version SVG + JS de Font Awesome: Superposition , Texte et compteurs .

Nous avons choisi certains des scénarios les plus courants pour intégrer Font Awesome dans les contrôles Telerik AJAX. Cependant, la suite AJAX contient plus de 120 contrôles différents. Donc, si vous souhaitez utiliser des icônes de police avec un contrôle AJAX qui n'est pas mentionné dans le billet de blog, utilisez la section commentaires ci-dessous ou soumettez un ticket à l'équipe d'assistance de Telerik!

pour ASP.NET AJAX, vous pouvez télécharger sa version d'évaluation entièrement fonctionnelle à partir du lien ci-dessous: