J'utilise des icônes de paiement SVG dans le pied de page de mon site Web. Cependant, je veux les intégrer. J'ai essayé de jouer avec le CSS mais rien ne se passe. Actuellement, les icônes sont affichées sous forme de liste. Comment puis-je les intégrer?

Voici le code du pied de page:

<footer class="page-footer variant4 fullboxed">
    <div class="footer-bot">
        <div class="container">
          <div class="footer-nav">
            <ul>
                {% for link in linklists[settings.footer_nav]links %}
                    <li>{{ link.title | link_to: link.url }}</li>
                {% endfor %}
            </ul>
          </div>
      {% unless shop.enabled_payment_types == empty %}
      {% assign payment_icons_available = 'amazon_payments,american_express,apple_pay,bitcoin,cirrus,dankort,diners_club,discover,dogecoin,dwolla,forbrugsforeningen,interac,jcb,litecoin,maestro,master,paypal,visa' | split: ',' %}
        <div class="payment-icons">
          {% for type in shop.enabled_payment_types %}
            {% if payment_icons_available contains type %}
              {% assign icon_name = type | prepend: 'icon-' %}
                {% include icon_name %}
                {% endif %}
          {% endfor %}
        </div>
      </div>
    {% endunless %}
  </div>
</footer>

Et voici le CSS:

.payment-icons {

  width: 50px;
  margin: auto; !important;

}
1
Ned 16 janv. 2017 à 23:17

2 réponses

Meilleure réponse

Vous comptez actuellement sur le conteneur des éléments SVG pour contrôler la largeur (50px) de chaque SVG, ce qui rend impossible la circulation de chaque SVG l'un à côté de l'autre. Ajustez votre CSS afin que le conteneur, div.payment-icons, puisse représenter 100% du conteneur externe et ajustez chaque élément SVG à une largeur spécifique de 50 px. À partir de là, vous pouvez ajouter du CSS supplémentaire pour espacer les icônes SVG sur la page:

svg:not(:root) {
    overflow: hidden;
    display: inline-block;
    width: 50px;
}

.payment-icons {
    width: auto;
    margin: auto;
}

Afin d'espacer parfaitement vos icônes SVG, ajustez le code HTML de votre pied de page afin que chaque icône SVG ait un conteneur d'élément de liste:

<div class="payment-icons">
    <ul>
      {% for type in shop.enabled_payment_types %}
        {% if payment_icons_available contains type %}
        <li>
            {% assign icon_name = type | prepend: 'icon-' %}
                {% include icon_name %}
            {% endif %}
        </li>
      {% endfor %}
    </ul>
</div>

Incluez ensuite le CSS suivant:

svg:not(:root) {
    overflow: hidden;
    display: inline-block;
    width: 50px;
    margin: 0 auto;
}

.payment-icons {
     // nothing should be needed here, unless you want negative margins to have the left-most and right-most icons to be against the "wall" of the container
}
.payment-icons ul {
    display: table;
    width: 100%;
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
}
.payment-icons ul li {
    display: table-cell;
    vertical-align: middle;
}

Mise à jour, mobile :

@media (min-width: 300px) {
    svg:not(:root) {
        overflow: hidden;
        display: inline-block;
        width: 100%;
        margin: 0 auto;
    }

    .payment-icons {
        width: auto;
        margin: auto;
    }
    .payment-icons ul {
        display: table;
        width: 100%;
        list-style-type: none;
        padding: 0;
    }
    .payment-icons ul li {
        display: table-cell;
        vertical-align: middle;
        padding: 0 5px;
    }
}

// tablet+
@media (min-width: 767px) {
    svg:not(:root) {
        width: 50px;
    }

    .payment-icons ul {
        width: 25%;
    }
    .payment-icons ul li {
        padding: 0;
    }
}
0
Ben Sewards 16 janv. 2017 à 21:34

Essayez d'ajouter:

.payment-icons 
   width: 100%;


.icon 
    display: inline;
    width: 10%;
    vertical-align: middle;

Je l'ai testé sur votre site Web dans l'inspecteur et cela a fonctionné.

0
dakab 16 janv. 2017 à 21:11