lokiiy Posted March 18, 2014 Share Posted March 18, 2014 Question pour un champion ... ou Pour un Noob Je cherche à comprendre comment fonctionne Font Awesome..??!! Dans Prestashop; ou est ce qu'on trouve tous les codes Font Awesome à insérer ?? Link to comment Share on other sites More sharing options...
CorentinDav Posted March 19, 2014 Share Posted March 19, 2014 Bonjour, Dans le dossier theme/default-bootstrap/sass/fontawsome Les deux fichiers _variables.scss et _icons.scss Pour afficher une icône il faut utiliser : <i class="icon-quetuveux"></i> Link to comment Share on other sites More sharing options...
lokiiy Posted March 19, 2014 Author Share Posted March 19, 2014 Ok pour récupérer le code voulu dans le dossier SASS J'étais pas allé encore fouiller ce dossier Quand je veux l'incorporer dans une feuille CSS existante genre par exemple global.css Le code se présente de cette façon... CSS content: "\f09a"; et toi tu me dit de coller ça : <i class="icon-quetuveux"></i> Désolé si ma question parait nul mais j ai encore jamais utilisé Font Awesome Link to comment Share on other sites More sharing options...
CorentinDav Posted March 19, 2014 Share Posted March 19, 2014 En fait tu veux ajouter un nouvel icon ou les utiliser ? Link to comment Share on other sites More sharing options...
lokiiy Posted March 19, 2014 Author Share Posted March 19, 2014 Je veux les utiliser ... Ou pour être plus précis en changer un par un autre déjà existant pour le moment... Après si jpeux apprendre à en utiliser sur les fiches produits, cms, ect ...Je dis pas non ... Link to comment Share on other sites More sharing options...
CorentinDav Posted March 19, 2014 Share Posted March 19, 2014 Pour les utiliser, dans du html, il faut utiliser la balise <i> par exemple <i class="icon-truck"></i> Link to comment Share on other sites More sharing options...
Pierre Webwalker Posted May 20, 2014 Share Posted May 20, 2014 Bonjour à tous Je relance ce sujet parce que je cherche à mon tour à ajouter une icône mais dans un fichier TPL. J'ai essayé d'ajouter <i class="fa-calendar"></i> je vois bien la déclaration dans le source mais l’icône n'apparaît pas. lokiiy, tu as réussi à insérer ton icône depuis le temps ? Merci pour votre aide Link to comment Share on other sites More sharing options...
jomcdonald Posted May 20, 2014 Share Posted May 20, 2014 Je sens que je vais faire des heureux donc suivez ce tuto et vous aurez toutes les icones dispo sur l’éditeur de texte pour pouvoir faire des superbes descriptions produits. http://blobmarket.com/blog/utiliser-fontawesome-dans-prestashop-1-6.html#.U3ut2Pl_tyV 1 Link to comment Share on other sites More sharing options...
Pierre Webwalker Posted May 21, 2014 Share Posted May 21, 2014 (edited) Bonjour à tous Merci jomcdonald Finalement, je m'en suis sorti en modifiant le format des préconisations Font Awesome http://fortawesome.github.io/Font-Awesome/ :<i class="fa fa-calendar"></i> Par le format PS : <i class="icon-calendar"></i> Je me demande d'ailleurs pourquoi PS a eu besoin de modifier ce format par rapport à l'original... Edited May 21, 2014 by pierrewebmaster (see edit history) Link to comment Share on other sites More sharing options...
jomcdonald Posted May 21, 2014 Share Posted May 21, 2014 Alors j'ai voulu afficher une petite vignette "check" à coté de la mention en stock sur la fiche produit mais ça ne marche pas. Testé sur le fichier product.tpl avec <i class="fa fa-check"></i> ou <i class="icon-check"></i> Rien ne marche... Si quelqu'un connait l'astuce, je mis prend sans doute mal mais j'aimerais savoir pourquoi. Merci Link to comment Share on other sites More sharing options...
Pierre Webwalker Posted May 22, 2014 Share Posted May 22, 2014 Bonjour Tu vois la balise dans le source ? Link to comment Share on other sites More sharing options...
jomcdonald Posted May 22, 2014 Share Posted May 22, 2014 Et bien non, justement. Voila ou je l'ai placé: product.pl <span id="availability_value"{if $product->quantity <= 0} class="warning_inline"{/if}>{if $product->quantity <= 0}{if $allow_oosp}{$product->available_later}{else}{l s='This product is no longer in stock'}{/if}{elseif $product->available_now}{$product->available_now}{else}<i class="icon-check"></i>{l s='In stock'}{/if}</span> Link to comment Share on other sites More sharing options...
Pierre Webwalker Posted May 22, 2014 Share Posted May 22, 2014 En ce qui me concerne j'ai masqué la disponibilité parce que j'ai des produits uniques mais j'essaierai de mettre la balise sur la ligne juste au dessus (ligne 210) : <span id="availability_label"><i class="icon-check"></i>{l s='Availability:'}</span> Link to comment Share on other sites More sharing options...
jomcdonald Posted May 22, 2014 Share Posted May 22, 2014 (edited) Effectivement à ce niveau ça marche... Y aurait'il un problème si la balise est placé dans un if ??? Mystère, mais là ce n'est pas fonctionnel... EDIT: Finalement le souci provient apparemment du javascript intégré à la balise "availability_value". Si on enlève id="availability_value" l'icone est visible mais la mention coloré en stock disparaît et le statut n'est plus actualisé si un produit est hors stock... Edited May 22, 2014 by jomcdonald (see edit history) Link to comment Share on other sites More sharing options...
Pierre Webwalker Posted May 22, 2014 Share Posted May 22, 2014 Je n'ai pas bien compris, ça fonctionne ? Sinon désolé ça sort de mes compétences Link to comment Share on other sites More sharing options...
jomcdonald Posted May 22, 2014 Share Posted May 22, 2014 Oui, ça marche en dehors de la zone "en stock". Ton code est bon et m'affiche bien l'icone mais si un produit n'est pas dispo, l'icone est toujours affiché, ce n'est donc pas fonctionnel. Et si on place l'icone à coté de la mention en stock, ça ne s'affiche plus . Conflit avec le javascript. Link to comment Share on other sites More sharing options...
superminou Posted July 17, 2014 Share Posted July 17, 2014 Et sinon c'est quoi le but d'avoir recoder les tags d'origine ? La le fa-check ==> icon-check n'est plus le meme par exemple... Link to comment Share on other sites More sharing options...
superminou Posted July 17, 2014 Share Posted July 17, 2014 On 5/22/2014 at 8:39 AM, jomcdonald said: Effectivement à ce niveau ça marche... Y aurait'il un problème si la balise est placé dans un if ??? Mystère, mais là ce n'est pas fonctionnel... EDIT: Finalement le souci provient apparemment du javascript intégré à la balise "availability_value". Si on enlève id="availability_value" l'icone est visible mais la mention coloré en stock disparaît et le statut n'est plus actualisé si un produit est hors stock... Pour moi ca fonctionne comme ca : <span id="availability_value"{if $product->quantity <= 0 && !$allow_oosp} class="warning_inline"{/if}> {if $product->quantity <= 0}{if $allow_oosp}<i class="icon-check"></i> YO {$product->available_later}{else} <i class="icon-warning-sign"></i> {l s='This product is no longer in stock'}{/if}{else}<i class="icon-check"></i> {$product->available_now}{/if}</span> Un icone CHECK quand c'est en stock Un icone POINT D'EXCLAMATION quand c'est indispo. Link to comment Share on other sites More sharing options...
superminou Posted July 17, 2014 Share Posted July 17, 2014 On 7/17/2014 at 4:52 AM, superminou said: Pour moi ca fonctionne comme ca : <span id="availability_value"{if $product->quantity <= 0 && !$allow_oosp} class="warning_inline"{/if}> {if $product->quantity <= 0}{if $allow_oosp}<i class="icon-check"></i> YO {$product->available_later}{else} <i class="icon-warning-sign"></i> {l s='This product is no longer in stock'}{/if}{else}<i class="icon-check"></i> {$product->available_now}{/if}</span> Un icone CHECK quand c'est en stock Un icone POINT D'EXCLAMATION quand c'est indispo. Pardon le bon code est celui-ci : <span id="availability_value"{if $product->quantity <= 0 && !$allow_oosp} class="warning_inline"{/if}> {if $product->quantity <= 0}{if $allow_oosp} {$product->available_later}{else} <i class="icon-warning-sign"></i> {l s='This product is no longer in stock'}{/if}{else}<i class="icon-check"></i> {$product->available_now}{/if}</span> </p> Le precedent contenait mes reperes Link to comment Share on other sites More sharing options...
myselfidem Posted July 17, 2014 Share Posted July 17, 2014 (edited) On 5/20/2014 at 7:34 PM, jomcdonald said: Je sens que je vais faire des heureux donc suivez ce tuto et vous aurez toutes les icones dispo sur l’éditeur de texte pour pouvoir faire des superbes descriptions produits. http://blobmarket.com/blog/utiliser-fontawesome-dans-prestashop-1-6.html#.U3ut2Pl_tyV Bonjour, J'ai bien suivi les explications fournies en lien...Et après plusieurs essais et vérifications le résultat est catastrophique. Il n'y a simplement plus les barres d'options des menus pour les informations des produits, et cela nul part (CMS, etc.) dans le Back-Office. J'ai remplacé par les fichiers d'origine...Mais l'erreur subsiste toujours !? Edited July 17, 2014 by myselfidem (see edit history) Link to comment Share on other sites More sharing options...
jomcdonald Posted July 17, 2014 Share Posted July 17, 2014 On 7/17/2014 at 4:55 AM, superminou said: Pardon le bon code est celui-ci : <span id="availability_value"{if $product->quantity <= 0 && !$allow_oosp} class="warning_inline"{/if}> {if $product->quantity <= 0}{if $allow_oosp} {$product->available_later}{else} <i class="icon-warning-sign"></i> {l s='This product is no longer in stock'}{/if}{else}<i class="icon-check"></i> {$product->available_now}{/if}</span> </p>Le precedent contenait mes reperes Oui, ça fonctionne bien quand un produit n'a pas de déclinaison mais sinon il y a un conflit javascript. Teste avec un produit à déclinaison pour voir... Link to comment Share on other sites More sharing options...
myselfidem Posted July 17, 2014 Share Posted July 17, 2014 (edited) @jomcdonald J'ai tenté une nouvelle fois...Vidé le cache...Et , cela fonctionne désormais très bien ! Merci beaucoup pour le lien et les explications données. Edited July 17, 2014 by myselfidem (see edit history) Link to comment Share on other sites More sharing options...
AlexVDB Posted July 6, 2018 Share Posted July 6, 2018 Bonjour, Je ressors ce vieux sujet pour le mettre d'actualité. J'aimerai ajouter quelques icon sur mon site presta et d'après le site font awesome le code est: <i class="fas fa-shipping-fast"></i> Problème, prestashop ne reconnait pas FAS fa- mais uniquement FA fa-, du coup impossible d'insérer les nouvelles icones. Quelqu'un a-t-il une solution à mon problème? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now