web-dev-qa-db-fra.com

Comment ajouter une icône ou un symbole personnalisé à un lien de drapeau?

Je travaille sur une implémentation de "demande d'exemple" pour un site de commerce utilisant Flag , Views , des sessions et un peu de code personnalisé.

Je voudrais ajouter une icône ou un symbole pour informer les utilisateurs qu'un élément qu'ils consultent a été signalé.

Je ne sais pas exactement comment aborder cela, je peux imaginer peut-être ajouter un champ conditionnel qui affiche une image ou une case à cocher qui est ensuite modifiée par Rules ou ajax, ou peut-être quelque chose de plus compliqué en JavaScript?

Cela pourrait être aussi simple que d'ajouter une case à cocher qui est cochée ou décochée lorsque le lien d'indicateur est cliqué ou peut-être même de changer le css/html au clic pour être identifié comme marqué.

Quoi qu'il en soit, reconnaissant pour tout conseil ici.

7rulesflags
5
nizz0k

Option 1: afficher une image à côté du texte du drapeau

Vous pouvez utiliser CSS pour ajouter un remplissage à gauche du texte et afficher une image d'arrière-plan, comme indiqué également dans la documentation de la communauté sur Comment afficher une image à côté du texte . En voici un extrait (remplacez "bookmarks" par le nom de machine de votre drapeau):

.flag-bookmarks a {
  padding-left: 20px;
}
.flag-bookmarks a.flag-action {
  background: url(images/i-dont-like-it.png) no-repeat left center;
}


.flag-bookmarks a.unflag-action {
  background: url(images/i-like-it.png) no-repeat left center;
}

Reportez-vous au Flag Theming guide pour (façon) plus de détails, à savoir:

  • Theming flag links using CSS , qui fournit une "carte" du HTML qui fait un lien de drapeau.
  • Theming flag links using Templates , qui explique comment utiliser le flag.tpl.php fichier dans le dossier 'theme' qui se trouve dans le propre dossier de Flag et qui est utilisé pour générer le code HTML des liens Flag. Il explique également comment vous pouvez attribuer un thème différent à différents drapeaux, en utilisant un drapeau spécifique flag--FLAGNAME.tpl.php fichier (alors que FLAGNAME est le nom de la machine du drapeau).
  • Exemples de thèmes , qui contient des solutions à certaines tâches de thème courantes.

Option 2: transformer le lien indicateur en un bouton

Vous pouvez transformer le lien Flag en un bouton , en ajoutant ce CSS (citation de ce lien):

.flag-wrapper.{flag-name} a.flag-action {
  background-image: url('path to the button image');
  display:block;
  text-indent:-9999em;
}
.flag-wrapper.{flag-name} a.unflag-action {
  background-image: url('path to the button image');
  display:block;
  text-indent:-9999em;
}

Remarques :

  • text-indent:-9999em masque l'élément (en le plaçant hors de l'écran).
  • Remplacer .{flag-name} avec le nom de machine de votre drapeau.
14
Pierre.Vriens

Si vous utilisez le module Flag pour rendre le lien de drapeau, vous pouvez utiliser le code suivant pour afficher des images à la place du texte de lien:

function theme_preprocess_flag(&$vars){
    $state = ($vars['action'] == 'flag' ? 'off' : 'on');
    $image_file = $vars['directory'] . '/images/flag-' . $vars['flag']->name . '-' . $state . '.png';
    if (file_exists($image_file)) {
        $vars['link_text'] = theme_image(array('path' => $image_file,   'attributes' => 
        array('class' => array('flag-' . $vars['flag']->name . '-' . $state))));
     }
}

Après avoir utilisé ce code dans template.php placez des images dans votre répertoire de thèmes nommées comme flag-flag_machine_name>-off|on.png.

6
Yatendra Singh

Collez ce code dans template.php

function Your_theme_preprocess_flag(&$vars) {
  $class = ($vars['action'] == 'flag') ? '<i class="fa fa-heart-o">   </i>' : '<i class="fa fa-heart"></i>';
  $vars['link_text'] = $class;
  $title_wishlist = ($vars['action'] == 'flag') ? 'Add to wishlist' : 'Remove from wishlist';
  $vars['link_title'] = $title_wishlist;
}
4
Vamsi

Après avoir copié le fichier tpl dans sites/all/modules/your_flag_module_name/flag_tpl_file à ton sites/all/themes/your_theme_name/templates/paste tpl file, vous pouvez modifier la conception de votre tpl en fonction de votre choix.

Toutes les variables sont disponibles sur ce tpl comme l'état du drapeau, etc.

3
Kamal Oberoi

Avec un thème Bootstrap (glyphicons intégrés), vous pouvez également ajouter une icône directement dans le champ de texte des drapeaux (où vous entrez normalement le texte du lien du drapeau). Au lieu d'écrire le texte entrez quelque chose comme ceci:

<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>

enter image description here

1
user24957

Je sais que c'est un post plus ancien, mais je voulais ajouter une solution simple en utilisant le module Fontawesome et le module Flags.

Lors de la création d'un indicateur, il vous a demandé quel texte vous voulez taper pour l'indicateur à la fois "texte de lien de drapeau" et "texte de lien de drapeau"

Vous pouvez coller un code fontawesme dans ces cases et il rendra les icônes fontawesome dans les pages. Cela fonctionne même avec les vues aussi. Alors, ajoutez quelque chose comme

<i class="far fa-bookmark"></i>

dans ces boîtes de réglage, et cela fonctionnera.

enter image description here

0
Anon Ymous