2021 Social Icons

Hi,

For the 2021 theme the filter names have changed. It looks like you are just missing some “_” characters.

The filters from class Twenty_Twenty_One_SVG_Icons are as follows:

twenty_twenty_one_svg_icons_ui
twenty_twenty_one_svg_icons_social
twenty_twenty_one_svg_icons_<custom>
twenty_twenty_one_social_icons_map

E.g. Change:
twentytwentyone_social_icons_map
to
twenty_twenty_one_social_icons_map

Do this for all your filters and see if the changes work.

@max-dayala Absolute legend! Works perfectly now. ??

@max-dayala One follow-up question if I may. Is it possible to assign an icon to a page? For example, everything is at the domain level, e.g. social.winter.ink. But is it possible to set one icon for social.winter.ink/privacy/ and another for social.winter.ink/disclaimer/

I don’t think that will work for a child theme since the code only supports matching on a domain. (For a full theme you could rewrite the appropriate bit of code so that it works with a domain and path.)

Hence, if you need to show both icons on the same wordpress page it won’t work.

I guess that if you only need to show one of the two icons on each WP page then in theory you could adapt your filter functions to do just that.

@max-dayala many thanks for the reply.

After a bit of experimenting, I worked out it is even easier than having to program the changes in a new theme. It seems you just need to use the slug for the url. For example, I can create an icon for my privacy page by adding:

function mychildtheme_twenty_twenty_one_social_icons_map( $icons ) {
    $icons['privacy'] = array(
        'privacy',
    );

    return $icons;
}
add_filter( 'twenty_twenty_one_social_icons_map', 'mychildtheme_twenty_twenty_one_social_icons_map' );

function mychildtheme_twenty_twenty_one_svg_icons_social( $icons ) {
    $icons['privacy'] = '<svg xmlns="https://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shield-lock-fill" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.777 11.777 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7.159 7.159 0 0 0 1.048-.625 11.775 11.775 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.541 1.541 0 0 0-1.044-1.263 62.467 62.467 0 0 0-2.887-.87C9.843.266 8.69 0 8 0zm0 5a1.5 1.5 0 0 1 .5 2.915l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99A1.5 1.5 0 0 1 8 5z"/></svg>';

    return $icons;
}
add_filter( 'twenty_twenty_one_svg_icons_social', 'mychildtheme_twenty_twenty_one_svg_icons_social' );

• This reply was modified 3 years, 7 months ago by robertwinter.

Any idea why the above code would sub the svg icons correctly but NOT pull new height/width? In twenty twenty-one, I’m subbing the plus/minus in the main nav with an up/down carot. Sidenote: this was coded to a custom plugin, not to the functions file in the theme.

/* CHANGE PLUS MINUS ICONS IN MAIN NAV
================================================== */
function clitheme_twenty_twenty_one_svg_icons_ui( $icons ) {
    $icons['plus'] = '<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" width="10px" height="10px"><path fill-rule="evenodd" d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"></path></svg>';
	  $icons['minus'] = '<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" width="10" height="10"><path fill-rule="evenodd" d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z" ></path></svg>';
 
    return $icons;
}
add_filter( 'twenty_twenty_one_svg_icons_ui', 'clitheme_twenty_twenty_one_svg_icons_ui' );

Note the new height/width in the code above, but the rendered output on front end still shows 18px height/width, which comes from the original svg file in classes.

svg[Attributes Style] {
    width: 18;
    height: 18;
}

• This reply was modified 3 years, 2 months ago by amanda blum.
• This reply was modified 3 years, 2 months ago by amanda blum.

Hi,

In this case it looks like the CSS declaration has a higher precedence than the svg height and width attributes.

I can think of a couple of things to try.

The first would be to add a class attribute to the svg element and then add some CSS to override the svg[Attributes Style] declaration.

A second approach might be to set an inline style attribute in the svg element. I think this would have a higher precedence than the value in the style sheet, although without trying it I’m not 100% certain of that.

Anyway, a couple of things to try if you haven’t already solved it.

What I would also say is that you shouldn’t be trying to set the size in the svg element in the first place since the size is added later on.

For the menu you have this in menu-functions.php that sets the height to 18:

/**
 * Add a button to top-level menu items that has sub-menus.
 * An icon is added using CSS depending on the value of aria-expanded.
 *
 * @since Twenty Twenty-One 1.0
 *
 * @param string $output Nav menu item start element.
 * @param object $item   Nav menu item.
 * @param int    $depth  Depth.
 * @param object $args   Nav menu args.
 *
 * @return string Nav menu item start element.
 */
function twenty_twenty_one_add_sub_menu_toggle( $output, $item, $depth, $args ) {
	if ( 0 === $depth && in_array( 'menu-item-has-children', $item->classes, true ) ) {

		// Add toggle button.
		$output .= '<button class="sub-menu-toggle" aria-expanded="false" onClick="twentytwentyoneExpandSubMenu(this)">';
		$output .= '<span class="icon-plus">' . twenty_twenty_one_get_icon_svg( 'ui', 'plus', 18 ) . '</span>';
		$output .= '<span class="icon-minus">' . twenty_twenty_one_get_icon_svg( 'ui', 'minus', 18 ) . '</span>';
		$output .= '<span class="screen-reader-text">' . esc_html__( 'Open menu', 'twentytwentyone' ) . '</span>';
		$output .= '</button>';
	}
	return $output;
}

If I look at a menu the code is like this:

<span class="icon-minus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"></path></svg></span>

Hence, I would say that your best bet would be to resize your svg image to be the “correct” size you want it to be in your drawing package, rather than try and tweak it with the rendered size in the browser. If you try and change just the one svg character with CSS then you might have alignment issues to sort out as well.

Another point is that you should copy the start of the svg tags exactly as they are in the original code, unless you have a good reason to change them.

<svg viewBox="0 0 24 24" fill="none" xmlns="https://www.w3.org/2000/svg">

An interesting point that follows on from this is that there looks to be a bug with the social icons because they specify the height and width. This results in the height and width attributes appearing twice in the svg string once it has been processed… but that is a separate issue.