0

I'm taking the first steps as a self-taught in the wordpress world. My problem is the following: modify the icons that the "Twentyseventeen" theme assigns by default in the social media menu. I created a child theme but I still don't understand how to replace the default chain icon that appears for custom links and facebook and instagram icons that I would like to replace with those made by me .

I tried to figure out how to put the footer.php file, but I don't know how to work. My starting point here is the following:

<?php

    </div><!-- #content -->

    <footer id="colophon" class="site-footer" role="contentinfo">
        <div class="wrap">
            <?php
            get_template_part( 'template-parts/footer/footer', 'widgets' );

            if ( has_nav_menu( 'social' ) ) :
                ?>
                <nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
                    <?php
                        wp_nav_menu(
                            array(
                                'theme_location' => 'social',
                                'menu_class'     => 'social-links-menu',
                                'depth'          => 1,
                                'link_before'    => '<span class="screen-reader-text">',
                                'link_after'     => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
                            )
                        );
                    ?>
                </nav><!-- .social-navigation -->
                <?php
            endif;

            get_template_part( 'template-parts/footer/site', 'info' );
            ?>
        </div><!-- .wrap -->
    </footer><!-- #colophon -->
</div><!-- .site-content-contain -->

Inspecting one of the chain icons, the situation is this:

<li id="menu-item-295" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-295">
<a href="https://www.booking.com/hotel/ch/locanda-gandriese.it.html">
<span class="screen-reader-text">Booking</span>
<svg class="icon icon-chain" aria-hidden="true" role="img">
<use href="#icon-chain" xlink:href="#icon-chain"></use>
<svg id="icon-chain" viewBox="0 0 30 32">
<path class="path1" d="M26 21.714q0-0.714-0.5-1.214l-3.714-3.714q-0.5-0.5-1.214-0.5-0.75 0-1.286 0.571 0.054 0.054 0.339 0.33t0.384 0.384 0.268 0.339 0.232 0.455 0.063 0.491q0 0.714-0.5 1.214t-1.214 0.5q-0.268 0-0.491-0.063t-0.455-0.232-0.339-0.268-0.384-0.384-0.33-0.339q-0.589 0.554-0.589 1.304 0 0.714 0.5 1.214l3.679 3.696q0.482 0.482 1.214 0.482 0.714 0 1.214-0.464l2.625-2.607q0.5-0.5 0.5-1.196zM13.446 9.125q0-0.714-0.5-1.214l-3.679-3.696q-0.5-0.5-1.214-0.5-0.696 0-1.214 0.482l-2.625 2.607q-0.5 0.5-0.5 1.196 0 0.714 0.5 1.214l3.714 3.714q0.482 0.482 1.214 0.482 0.75 0 1.286-0.554-0.054-0.054-0.339-0.33t-0.384-0.384-0.268-0.339-0.232-0.455-0.063-0.491q0-0.714 0.5-1.214t1.214-0.5q0.268 0 0.491 0.063t0.455 0.232 0.339 0.268 0.384 0.384 0.33 0.339q0.589-0.554 0.589-1.304zM29.429 21.714q0 2.143-1.518 3.625l-2.625 2.607q-1.482 1.482-3.625 1.482-2.161 0-3.643-1.518l-3.679-3.696q-1.482-1.482-1.482-3.625 0-2.196 1.571-3.732l-1.571-1.571q-1.536 1.571-3.714 1.571-2.143 0-3.643-1.5l-3.714-3.714q-1.5-1.5-1.5-3.643t1.518-3.625l2.625-2.607q1.482-1.482 3.625-1.482 2.161 0 3.643 1.518l3.679 3.696q1.482 1.482 1.482 3.625 0 2.196-1.571 3.732l1.571 1.571q1.536-1.571 3.714-1.571 2.143 0 3.643 1.5l3.714 3.714q1.5 1.5 1.5 3.643z"></path>
</svg>
</use>
</svg>
</a>
</li>

As you can see these icons must redirect to an external link (https://www.booking.com/hotel/ch/locanda-gandriese.it.html), if pressed, and that's why I'd like to replace them rather than complicate my life further to recreate the same situation with a completely new menu.

Please, help me!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.