How to set the instagram icon in the menu

Backlight 4, 5 & 6 Support
#1

I am updating my website (after a long long time…since BL 4!..but as I have just upgraded to 6 I decided to renew the site) and tried two things without success:

a) set the button for changing language in the menu (seems that this is not an option for BL, but who knows…)

b) set the instagram icon in the menu: only a blank square appears…I put in the Name window of the item corresponding to the menu set…but…

any clue?

Agustin

#2

See my post “Social Media Icons and fontawsome free” I now have icons on the bottom of my home page and in the menu bar

#3

I think you need to stick with the button in the top pallet

this will require adding the font awesome icon code to the Name field and in the Link to field choose URL and enter the address to your Instagram page.

For example, this is what I have for my Home page:

image

II believe Backlight 6 still comes with Font Awesome 5 (free). It’s only available for Pangolin templates however.

#4

Personally, I’ve grown to dislike Font Awesome. It’s bloated, and doesn’t fit well with Kookaburra’s design and performance ethos. Kookaburra bakes in its own symbol elements, and you can use PHPlugins hooks (symbols_top, symbols_bottom) either to replace them, or supplement them with additional symbols.

Currently, the symbols are mostly sourced from https://iconsvg.xyz/. You can get their Instagram icon from the Brand logo page.

Our symbol “template” looks like this:

<symbol
	fill="none"
	id="check"
	stroke="currentColor"
	stroke-linecap="round"
	stroke-linejoin="round"
	stroke-width="2"
	viewBox="0 0 24 24"
>
	<!-- shape elements here -->
</symbol>

So, I’d go to that site, and copy the SVG code for a symbol I want to add. Their Instagram SVG is code is this:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000">
	 <path d="M16.98 0a6.9 6.9 0 0 1 5.08 1.98A6.94 6.94 0 0 1 24 7.02v9.96c0 2.08-.68 3.87-1.98 5.13A7.14 7.14 0 0 1 16.94 24H7.06a7.06 7.06 0 0 1-5.03-1.89A6.96 6.96 0 0 1 0 16.94V7.02C0 2.8 2.8 0 7.02 0h9.96zm.05 2.23H7.06c-1.45 0-2.7.43-3.53 1.25a4.82 4.82 0 0 0-1.3 3.54v9.92c0 1.5.43 2.7 1.3 3.58a5 5 0 0 0 3.53 1.25h9.88a5 5 0 0 0 3.53-1.25 4.73 4.73 0 0 0 1.4-3.54V7.02a5 5 0 0 0-1.3-3.49 4.82 4.82 0 0 0-3.54-1.3zM12 5.76c3.39 0 6.2 2.8 6.2 6.2a6.2 6.2 0 0 1-12.4 0 6.2 6.2 0 0 1 6.2-6.2zm0 2.22a3.99 3.99 0 0 0-3.97 3.97A3.99 3.99 0 0 0 12 15.92a3.99 3.99 0 0 0 3.97-3.97A3.99 3.99 0 0 0 12 7.98zm6.44-3.77a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8z"/>
</svg>

I don’t care about the svg element that wraps it all, but we want the internal elements. In this case, that’s the path. Copy and paste that into our symbol wrapper, and assign a unique id value:

<symbol
	fill="none"
	id="instagram"
	stroke="currentColor"
	stroke-linecap="round"
	stroke-linejoin="round"
	stroke-width="2"
	viewBox="0 0 24 24"
>
	<path d="M16.98 0a6.9 6.9 0 0 1 5.08 1.98A6.94 6.94 0 0 1 24 7.02v9.96c0 2.08-.68 3.87-1.98 5.13A7.14 7.14 0 0 1 16.94 24H7.06a7.06 7.06 0 0 1-5.03-1.89A6.96 6.96 0 0 1 0 16.94V7.02C0 2.8 2.8 0 7.02 0h9.96zm.05 2.23H7.06c-1.45 0-2.7.43-3.53 1.25a4.82 4.82 0 0 0-1.3 3.54v9.92c0 1.5.43 2.7 1.3 3.58a5 5 0 0 0 3.53 1.25h9.88a5 5 0 0 0 3.53-1.25 4.73 4.73 0 0 0 1.4-3.54V7.02a5 5 0 0 0-1.3-3.49 4.82 4.82 0 0 0-3.54-1.3zM12 5.76c3.39 0 6.2 2.8 6.2 6.2a6.2 6.2 0 0 1-12.4 0 6.2 6.2 0 0 1 6.2-6.2zm0 2.22a3.99 3.99 0 0 0-3.97 3.97A3.99 3.99 0 0 0 12 15.92a3.99 3.99 0 0 0 3.97-3.97A3.99 3.99 0 0 0 12 7.98zm6.44-3.77a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8z"/>
</symbol>

Add that via PHPlugins.

Then, you can use the symbol in your page like this:

<svg width="18" height="18"><use xlink:href="#instagram" /></svg>

So, that’s the Kookaburra situation. It’s more setup work, but ensures you only have to load the code you need, and you’re not sitting on thousands of icons you’ll never use.

1 Like