In the last article, we learned how we can customize the navbar of the Plus
UI template and how we can change its icons. In this article, we will
learn how we can customize the icons in the header area of our Plus UI
template.
Plus UI Template Header customization | Icons and more | The Ice
Tech
|
| Plus UI Template Header Customization | Icons and more | The Ice Tech |
All codes will be provided to you like last time.
Requirements
All the requirements will remain the same as last time.
Let's Start
So let's go straight to the edit HTML area of our blogger.
1. First of all we will customize the Search Icon, Copy and find this code
in your template <b:includable id='search-icon'> Below this code you
will find the SVG code, Then replace the given SVG with my provided SVG
code.
<svg class='line' viewBox='0 0 24 24'><g><!-- Adjusting circle radius to make it appear bolder --><circle cx='11.36167' cy='11.36167' r='10.86167' stroke-width='2'/><!-- Increasing stroke width of the line to make it bolder --><line class='svgC' x1='22' x2='19.9332' y1='22' y2='19.9332' stroke-width='2'/></g></svg>
2. Let's change the Bookmark Icon, Copy and find this code in your
template <b:includable id='bookmark-icon'> Below this code you will find the SVG code, Then replace the given
SVG with my provided SVG code.
<svg class='line' viewBox='0 0 24 24'><g transform='translate(4.500000, 2.500000)'><!-- Adding stroke-width='2' to make the path bolder --><path d='M7.47024319,0 C1.08324319,0 0.00424318741,0.932 0.00424318741,8.429 C0.00424318741,16.822 -0.152756813,19 1.44324319,19 C3.03824319,19 5.64324319,15.316 7.47024319,15.316 C9.29724319,15.316 11.9022432,19 13.4972432,19 C15.0932432,19 14.9362432,16.822 14.9362432,8.429 C14.9362432,0.932 13.8572432,0 7.47024319,0 Z' stroke-width='2'/></g></svg>
Also, change the Alt Bookmark Icon SVG below this code
<b:includable id='bookmark-alt-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(4.500000, 2.500000)'><!-- Adding stroke-width='2' to make the path bolder --><path d='M7.47024319,0 C1.08324319,0 0.00424318741,0.932 0.00424318741,8.429 C0.00424318741,16.822 -0.152756813,19 1.44324319,19 C3.03824319,19 5.64324319,15.316 7.47024319,15.316 C9.29724319,15.316 11.9022432,19 13.4972432,19 C15.0932432,19 14.9362432,16.822 14.9362432,8.429 C14.9362432,0.932 13.8572432,0 7.47024319,0 Z' stroke-width='2'/><!-- Adding stroke-width='2' to make the lines bolder --><line class='svgC v' transform='translate(-4.500000, -2.500000)' x1='12' x2='12' y1='6' y2='12' stroke-width='2'/><line class='svgC h' transform='translate(-4.500000, -2.500000)' x1='15' x2='9' y1='9' y2='9' stroke-width='2'/></g></svg>
3. Now change Google Translate Icon, Copy and find this code in your
template <b:includable id='translate-icon'> Below this code you will find the SVG code, Then replace the given
SVG with my provided SVG code.
<svg class='line' viewBox='0 0 24 24'><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' stroke-width='2'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' stroke-width='2'/><line x1='17' x2='13.5' y1='19.5' y2='23.5' stroke-width='2'/><line class='svgC' x1='14.5' x2='21.5' y1='10.5' y2='10.5' stroke-width='2'/><line class='svgC' x1='17.5' x2='17.5' y1='9.5' y2='10.5' stroke-width='2'/>
<path class='svgC' d='M20,10.5c0,1.1-1.77,4.42-4,6' stroke-width='2'/><path class='svgC' d='M16,13c.54,1.33,4,4.5,4,4.5' stroke-width='2'/><path class='svgC' d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' stroke-width='2'/></svg>
4. Let's change the Profile Icon, Copy and find this code in your
template <b:includable id='profile-icon'> Below this code
you will find the SVG code, Then replace the given SVG with my provided SVG
code.
<svg class='line' viewBox='0 0 24 24'><path class='svgC' d='M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z' stroke-width='2'/><path d='M20.5899 22C20.5899 18.13 16.7399 15 11.9999 15C7.25991 15 3.40991 18.13 3.40991 22' stroke-width='2'/></svg>
5. Change mode Icon it has two SVG, First Moon Icon and the second one
is Sun Icon
First, we are gonna replace Moon Icon, Copy and find this code in your template <b:includable id='moon-sun-icon'> Below this code you will find the SVG code, Then replace the given
SVG with my provided SVG code.
<svg class='line' viewBox='0 0 24 24'>
<g class='d1'><path d='M183.72453,170.371a10.4306,10.4306,0,0,1-.8987,3.793,11.19849,11.19849,0,0,1-5.73738,5.72881,10.43255,10.43255,0,0,1-3.77582.89138,1.99388,1.99388,0,0,0-1.52447,3.18176,10.82936,10.82936,0,1,0,15.118-15.11819A1.99364,1.99364,0,0,0,183.72453,170.371Z' transform='translate(-169.3959 -166.45548)' stroke-width='2'/></g>
<g class='d2'><path class='f' d='M12 18.5C15.5899 18.5 18.5 15.5899 18.5 12C18.5 8.41015 15.5899 5.5 12 5.5C8.41015 5.5 5.5 8.41015 5.5 12C5.5 15.5899 8.41015 18.5 12 18.5Z' stroke-width='2'/><path class='svgC' d='M19.14 19.14L19.01 19.01M19.01 4.99L19.14 4.86L19.01 4.99ZM4.86 19.14L4.99 19.01L4.86 19.14ZM12 2.08V2V2.08ZM12 22V21.92V22ZM2.08 12H2H2.08ZM22 12H21.92H22ZM4.99 4.99L4.86 4.86L4.99 4.99Z' stroke-width='2'/></g></svg>
Now replace the moon icon SVG, Copy and find this code in your
template <b:includable id='sun-moon-icon'> Below this code you will find the SVG code, Then replace the given
SVG with my provided SVG code.
<svg class='line' viewBox='0 0 24 24'>
<g class='d1'><path class='f' d='M12 18.5C15.5899 18.5 18.5 15.5899 18.5 12C18.5 8.41015 15.5899 5.5 12 5.5C8.41015 5.5 5.5 8.41015 5.5 12C5.5 15.5899 8.41015 18.5 12 18.5Z' stroke-width='2'/><path class='svgC' d='M19.14 19.14L19.01 19.01M19.01 4.99L19.14 4.86L19.01 4.99ZM4.86 19.14L4.99 19.01L4.86 19.14ZM12 2.08V2V2.08ZM12 22V21.92V22ZM2.08 12H2H2.08ZM22 12H21.92H22ZM4.99 4.99L4.86 4.86L4.99 4.99Z' stroke-width='2'/></g>
<g class='d2'><path d='M183.72453,170.371a10.4306,10.4306,0,0,1-.8987,3.793,11.19849,11.19849,0,0,1-5.73738,5.72881,10.43255,10.43255,0,0,1-3.77582.89138,1.99388,1.99388,0,0,0-1.52447,3.18176,10.82936,10.82936,0,1,0,15.118-15.11819A1.99364,1.99364,0,0,0,183.72453,170.371Z' transform='translate(-169.3959 -166.45548)' stroke-width='2'/></g></svg>
Conclusion
I hope you like this Header Icon Customization, I have provided my bold Icons
You can also replace these icons with your own icons and make sure to backup
your theme before applying these codes, Thanks for visiting
Upcoming
In the next article, we gonna Customize the header section so stay
tune
