icône – devfrontend.info

Picto SVG qui s’affiche correctement sous Mac et le navigateur Safari:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>①/icons/expand</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <g stroke="#34393b">
            <line x1="15.5" y1="8.499" x2="23.5" y2="0.499"></line>
            <line x1="0.5" y1="23.499" x2="8.5" y2="15.499"></line>
            <polyline points="5.5 23.499 0.5 23.499 0.5 18.499"></polyline>
            <polyline points="23.5 5.499 23.5 0.499 18.5 0.499"></polyline>
            <line x1="15.5" y1="15.499" x2="23.5" y2="23.499"></line>
            <line x1="0.5" y1="0.499" x2="8.5" y2="8.499"></line>
            <polyline points="0.5 5.499 0.5 0.499 5.5 0.499"></polyline>
            <polyline points="18.5 23.499 23.5 23.499 23.5 18.499"></polyline>
        </g>
    </g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>

<title>①/icons/expand</title>

</g>

</svg>

Le même picto SVG (code source différent) qui ne s’affiche pas sous Mac et le navigateur Safari:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="filter-1">
            <feColorMatrix in="SourceGraphic" type="matrix" values=""></feColorMatrix>
        </filter>
    </defs>
    <g id="——-WS-fiche-produit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <g id="fiche-produit-qté---WS" transform="translate(-724.000000, -733.000000)">
            <g id="produit" transform="translate(30.000000, 130.000000)">
                <g id="icons-expand" transform="translate(69.000000, 0.000000)" filter="url(#filter-1)">
                    <g transform="translate(626.000000, 604.000000)" id="expand-1">
                        <line x1="12.9166667" y1="7.0825" x2="19.5833333" y2="0.415833333" id="Shape" stroke="#000000"></line>
                        <line x1="0.416666667" y1="19.5825" x2="7.08333333" y2="12.9158333" id="Shape" stroke="#000000"></line>
                        <polyline id="Shape" stroke="#000000" points="4.58333333 19.5825 0.416666667 19.5825 0.416666667 15.4158333"></polyline>
                        <polyline id="Shape" stroke="#000000" points="19.5833333 4.5825 19.5833333 0.415833333 15.4166667 0.415833333"></polyline>
                        <line x1="12.9166667" y1="12.9158333" x2="19.5833333" y2="19.5825" id="Shape" stroke="#000000"></line>
                        <line x1="0.416666667" y1="0.415833333" x2="7.08333333" y2="7.0825" id="Shape" stroke="#000000"></line>
                        <polyline id="Shape" stroke="#000000" points="0.416666667 4.5825 0.416666667 0.415833333 4.58333333 0.415833333"></polyline>
                        <polyline id="Shape" stroke="#000000" points="15.4166667 19.5825 19.5833333 19.5825 19.5833333 15.4158333"></polyline>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>

<defs>

</filter>

</defs>

</g>

</svg>

Source : Toggle Icon when Toggler Fires?

jQuery(document).ready(function(){
  // Toggle Icon when Toggler Fires
  jQuery('.flights-primary-info').on('click', function(){
    var getClickedItemID = jQuery(this).attr('data-toggle');
    jQuery('.flights-secondary-info[id="'+getClickedItemID+'"]').on('on.zf.toggler off.zf.toggler', function(e) {
      jQuery('.flights-primary-info[data-toggle="'+getClickedItemID+'"')
        .find('.iconfont')
        .toggleClass('iconfont-chevron-up iconfont-chevron-down');
    });
  });
});

jQuery(document).ready(function(){

// Toggle Icon when Toggler Fires

jQuery('.flights-primary-info').on('click', function(){

var getClickedItemID = jQuery(this).attr('data-toggle');

jQuery('.flights-secondary-info[id="'+getClickedItemID+'"]').on('on.zf.toggler off.zf.toggler', function(e) {

jQuery('.flights-primary-info[data-toggle="'+getClickedItemID+'"')

.find('.iconfont')

.toggleClass('iconfont-chevron-up iconfont-chevron-down');

});

  <li class="flights-list-item">
    <!-- always visible -->
    <a class="flights-primary-info" data-toggle="secondary">
      <div class="row">
        <div class="columns shrink">
          <i class="iconfont iconfont-chevron-down" />
        </div>        
      </div>
    </a>
    <!-- end: always visible -->
    
    <!-- toggle on click -->
    <div class="is-hidden flights-secondary-info" id="secondary" data-toggler="is-hidden">
    </div>
    <!-- end: toggle on click -->
  </li>

</div>

</a>

</div>

</li>

Articles récents

Catégories

Archives

Méta

Étiquette : icône

Résoudre les problèmes d’affichage d’un picto SVG sous Mac et le navigateur Safari

Picto SVG qui s’affiche correctement sous Mac et le navigateur Safari:

Le même picto SVG (code source différent) qui ne s’affiche pas sous Mac et le navigateur Safari:

[Foundation 6] Permuter une icone lorsqu’on affiche/masque des éléments avec le plug-in Toggler