Canvas Docs

Social Icons

Group of social icon links with hover animation, multiple styles, sizes, and optional sticky positioning. It is shown in the block inserter as Canvas Social Icons and registered as canvas-core/social-icons.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Social Icons settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

  • Use Global Social LinksDefaultOff

    Render the profiles from Theme Options → Social, so one change updates every social block on the site. The list below is kept as the styling template: a profile that matches one of these icons (by label or icon) keeps that row's hover/background classes.

  • Which ProfilesDefaultAll Site Profiles

    All Site Profiles renders every profile in Theme Options → Social. Only Those Listed Below renders just the icons in this block, in this order, each still taking its link, icon and label from the matching site profile, for a curated row that is a subset of the site's profiles.

    ChoicesAll Site ProfilesOnly Those Listed BelowShown when Use Global Social Links is on

  • IconsDefaulta preset list of 3 rows

    The profiles in this row, one per icon, shown in the order you arrange them.

    Each row of Icons takes:

    • IconDefaultEmpty

      The brand glyph shown for this profile.

    • Link URLDefault#

      Address of your profile on that network.

    • Open in New TabDefaultOff

      Adds target="_blank" to this profile link.

    • NofollowDefaultOff

      Adds rel="nofollow" to this profile link.

    • LabelDefaultEmpty

      Accessibility label for screen readers, and the tooltip text when Show Title is on.

    • Accessibility LabelDefaultEmpty

      Overrides Label for screen readers only, so the tooltip can stay short while the announced name is a full sentence.

    • Bootstrap TooltipDefaultOff

      Opens this icon's label as a styled tooltip. Use the block-level placement to turn it on for every icon at once.

    • Hover ClassDefaultEmpty

      Canvas brand hover background class (e.g. h-bg-facebook).

    • Static Background ClassDefaultEmpty

      Permanent background class for colored style.

    • Extra ClassesDefaultEmpty

      Utility classes on this icon alone: how a design cancels the gap after the last one in a row.

    • Resting Glyph ClassesDefaultEmpty

      Classes for the glyph shown at rest only: how a design dims the resting icon so the one that slides in on hover reads brighter.

    • Hover GlyphDefaultEmpty

      A DIFFERENT glyph for the hover state, replacing the resting one rather than adding to it: a design that fades an old wordmark out to the current one.

    • Hover Glyph ClassesDefaultEmpty

      Classes for the glyph that slides in on hover only: how a bright brand colour (Snapchat, LINE) gets a dark glyph without changing the resting one.

    • Entrance AnimationDefaultEmpty

      Animation class played once this icon scrolls into view, for a row that arrives one icon at a time. Empty means the icon is simply there.

    • Animation Delay (ms)DefaultEmpty

      How long this icon waits before its animation starts, which is how a row staggers. Only applies when an entrance animation is set; leave it empty on the icon that starts immediately.

Settings

  • SizeDefaultDefault (2.5rem)

    How large each icon is drawn. Mini and Small suit a footer bar; Large suits a contact panel.

    ChoicesMini (1.75rem)Small (2rem)Default (2.5rem)Large (3.5rem)

  • Icon ClassesDefaultEmpty

    Classes added to every icon link, e.g. border and text-colour utilities.

  • ShapeDefaultRounded (Default)

    Corner treatment of each icon box: softly rounded, a full circle, or square corners.

    ChoicesRounded (Default)CircleSquare

  • BorderDefaultDefault

    Transparent adds .border-transparent to every icon, used by the #copyrights bar.

    ChoicesDefaultTransparent (No Border)

  • Wrapper LayoutDefaultDefault (.social-icons)

    Flex End renders a plain "d-flex justify-content-center justify-content-md-end mb-2" row instead of the .social-icons wrapper, used by the #copyrights bar. Bare renders NO wrapping element at all: the icon links become direct children of whatever parent contains this block (e.g. a .header-misc flex row), used by the full-border header layout's header-misc icon group.

    ChoicesDefault (.social-icons)Flex End (Copyrights Bar)Bare (No Wrapper - Direct Children)

  • Disable Slide AnimationDefaultOff

    Disables the icon slide animation on hover.

  • Enable StickyDefaultOff

    Fix social icons to the side of the viewport using .si-sticky.

  • Sticky SideDefaultLeft

    Which edge of the screen the pinned column of icons rides against.

    ChoicesLeftRightShown when Enable Sticky is on

  • Sticky VariantDefaultStandard

    Standard keeps the pinned icons as plain glyphs. Sidebar widens each one on hover to reveal its label.

    ChoicesStandardSidebar (Expandable Labels)Shown when Enable Sticky is on

  • Entrance AnimationDefaultOn

    Slide the pinned icons in when the page loads instead of having them appear at once.

    Shown when Enable Sticky is on

  • Animation Stagger (ms)Default100

    Extra wait added for each icon down the column, so they arrive one after another rather than together.

    Shown when Enable Sticky is on

  • Hide on MobileDefaultOff

    Hide the pinned column on screens narrower than 992 pixels, where it would sit over the content.

    Shown when Enable Sticky is on

  • StyleDefaultDefault (Bordered)

    How the icons are drawn at rest: an outlined box, no box at all, each network's own brand colour, or bare glyphs in the surrounding text colour.

    ChoicesDefault (Bordered)BorderlessColored BackgroundsText Color Only

Appearance

  • Icon SizeDefaultEmpty

    Width and height of each icon box, for a size the Size choices above do not cover.

  • Gap Between IconsDefaultEmpty

    Space left between one icon and the next.

  • Glyph SizeDefaultEmpty

    Size of the brand glyph inside the box, which you can set apart from the box itself.

  • Border WidthDefaultEmpty

    Thickness of the outline around each icon. The glyph is re-centred to match, so a heavier border does not push it off centre.

  • Border ColourDefaultEmpty

    Colour of the outline around each icon.

  • Glyph ColourDefaultEmpty

    Colour of the brand glyph at rest.

  • Background ColourDefaultEmpty

    Solid background behind every icon.

  • Corner RadiusDefaultEmpty

    How rounded the corners of each icon box are. Use 50% for a circle or 0 for square corners.

  • Show Label as TooltipDefaultOff

    Also render the Label in a title attribute, so hovering an icon shows the network name.

  • Tooltip StyleDefaultEmpty

    Hands the label to Bootstrap's tooltip plugin instead of the browser's plain one, and says which side it opens on.

    ChoicesBrowser default (empty)Bootstrap tooltip - aboveBootstrap tooltip - belowBootstrap tooltip - leftBootstrap tooltip - rightShown when Show Label as Tooltip is on

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Canvas: Alerts, Buttons, Code Highlight, Counters, Dividers, Dropcaps.

Was this page helpful?