|
|
How to customize Plus UI Template Navbar Icon and Fonts | Plus UI
template customization | Navbar Customization
|
Plus UI is a wonderful template for Blogger with many amazing features. If
you are using this template or planning to use it in the future, you will love
these font and icon customizations. In this blog, I have told you how you can
give a bold look to the fonts and icons of your Plus UI template step by
step.
How to customize Plus UI Template Navbar Icon and Fonts | Plus UI template customization | Navbar Customization
Requirements
-
PC or Smartphone (If you can do this on the smartphone)
-
Plus UI Template (Uploaded)
-
Codes (Which I have already provided below)
- Blogger Account
So Let's Start
First log into your blogger account go to the themes section and then Edit
HTML
|
|
How to customize Plus UI Template Navbar Icon and Fonts | Plus UI
template customization | Navbar Customization
|
How to make the font bold
let's start with Fonts, First we are going to Bold all the fonts of the
Plus UI template, You can skip it if you want font size as it is.
Remember that this will also change the fonts written in your post to bold, so
always change your font type while writing the poster.
Now replace all the font-weight properties with bold for example- font-weight:400; to font-weight:bold;
It will change the font of your template.
How to make icons bold
If you follow the instructions carefully which are given by me, you will
easily be able to bold and replace the icons of your Plus UI template.
1. Landing Page Icon
Copy and find this code in your template <!--[ 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(2.000000, 2.000000)'><path class='svgC' d='M4.0706,14.459 C4.0706,14.459 4.8826,12.822 6.0646,12.822 C7.2466,12.822 7.8506,14.197 9.1606,14.197 C10.4696,14.197 11.9386,10.749 13.4226,10.749 C14.9046,10.749 15.9706,13.14 15.9706,13.14' stroke-width='2'/><path class='svgC' d='M8.1393,7.1049 C8.1393,7.9649 7.4423,8.6629 6.5813,8.6629 C5.7213,8.6629 5.0243,7.9649 5.0243,7.1049 C5.0243,6.2449 5.7213,5.5469 6.5813,5.5469 C7.4423,5.5479 8.1393,6.2449 8.1393,7.1049 Z' stroke-width='2'/><path d='M0.7503,10.0001 C0.7503,16.9371 3.0633,19.2501 10.0003,19.2501 C16.9373,19.2501 19.2503,16.9371 19.2503,10.0001 C19.2503,3.0631 16.9373,0.7501 10.0003,0.7501 C3.0633,0.7501 0.7503,3.0631 0.7503,10.0001 Z' stroke-width='2'/></g></svg>
2. Folder Icon
Find this code in your Plus UI template
<b:includable id='folder-icon'>, below this code you will find an SVG code, replace the SVG code with my
provided SVG
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.500000, 2.500000)'><line class='svgC' x1='6.6787' x2='12.4937' y1='12.0742685' y2='12.0742685' stroke-width='2'/><path d='M-1.13686838e-13,5.29836453 C-1.13686838e-13,2.85645977 1.25,0.75931691 3.622,0.272650243 C5.993,-0.214968804 7.795,-0.0463973758 9.292,0.761221672 C10.79,1.56884072 10.361,2.76122167 11.9,3.63645977 C13.44,4.51265024 15.917,3.19645977 17.535,4.94217405 C19.229,6.7697931 19.2200005,9.57550739 19.2200005,11.3640788 C19.2200005,18.1602693 15.413,18.6993169 9.61,18.6993169 C3.807,18.6993169 -1.13686838e-13,18.2288407 -1.13686838e-13,11.3640788 L-1.13686838e-13,5.29836453 Z' stroke-width='2'/></g></svg>
Cut Folder Icon
This is another code of the folder icon you can also use this icon as
well
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.500000, 2.500000)'><line class='svgC' stroke-width='2' x1='6.6787' x2='12.4937' y1='12.0742685' y2='12.0742685'/><path d='M-1.13686838e-13,5.29836453 C-1.13686838e-13,2.85645977 1.25,0.75931691 3.622,0.272650243 C5.993,-0.214968804 7.795,-0.0463973758 9.292,0.761221672 C10.79,1.56884072 10.361,2.76122167 11.9,3.63645977 C13.44,4.51265024 15.917,3.19645977 17.535,4.94217405 C19.229,6.7697931 19.2200005,9.57550739 19.2200005,11.3640788 C19.2200005,18.1602693 15.413,18.6993169 9.61,18.6993169 C3.807,18.6993169 -1.13686838e-13,18.2288407 -1.13686838e-13,11.3640788' stroke-width='2'/></g></svg>
Now repeat the process
3. About Icon
Replace the given SVG blow this code <b:includable id='profiles-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.749500, 2.549500)'><path d='M6.809,18.9067 C3.137,18.9067 9.41469125e-14,18.3517 9.41469125e-14,16.1277 C9.41469125e-14,13.9037 3.117,11.8997 6.809,11.8997 C10.481,11.8997 13.617,13.8847 13.617,16.1077 C13.617,18.3307 10.501,18.9067 6.809,18.9067 Z' stroke-width='2'/><path d='M6.809,8.728 C9.219,8.728 11.173,6.774 11.173,4.364 C11.173,1.954 9.219,-2.48689958e-14 6.809,-2.48689958e-14 C4.399,-2.48689958e-14 2.44496883,1.954 2.44496883,4.364 C2.436,6.766 4.377,8.72 6.778,8.728 L6.809,8.728 Z' stroke-width='2'/><path class='svgC' d='M14.0517,7.5293 C15.4547,7.1543 16.4887007,5.8753 16.4887007,4.3533 C16.4897,2.7653 15.3627,1.4393 13.8647,1.1323' stroke-width='2'/><path class='svgC' d='M14.7113,11.104 C16.6993,11.104 18.3973,12.452 18.3973,13.655 C18.3973,14.364 17.8123,15.092 16.9223,15.301' stroke-width='2'/></g></svg>
4. Contact Icon
Replace the given SVG blow this code <b:includable id='message-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.452080, 2.851980)'><path class='svgC' d='M15.0928322,6.167017 C15.0928322,6.167017 11.8828071,10.0196486 9.53493746,10.0196486 C7.18807029,10.0196486 3.941955,6.167017 3.941955,6.167017' stroke-width='2'/><path d='M1.04805054e-13,9.11679198 C1.04805054e-13,2.27869674 2.38095238,8.8817842e-15 9.52380952,8.8817842e-15 C16.6666667,8.8817842e-15 19.047619,2.27869674 19.047619,9.11679198 C19.047619,15.9538847 16.6666667,18.233584 9.52380952,18.233584 C2.38095238,18.233584 1.04805054e-13,15.9538847 1.04805054e-13,9.11679198 Z' stroke-width='2'/></g></svg>
5. Safelink Icon
Replace the given SVG blow this code <b:includable id='shield-done-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(3.500000, 2.000000)'><path d='M8.4845,19.6057 C10.8195,19.6057 16.1565,17.2837 16.1565,10.8787 C16.1565,4.4747 16.4345,3.9737 15.8195,3.3577 C15.2035,2.7417 11.9935,0.7507 8.4845,0.7507 C4.9755,0.7507 1.7655,2.7417 1.1505,3.3577 C0.5345,3.9737 0.8125,4.4747 0.8125,10.8787 C0.8125,17.2837 6.1505,19.6057 8.4845,19.6057 Z' stroke-width='2'/><polyline class='svgC' points='5.8859 9.8748 7.7779 11.7698 11.6759 7.8698' stroke-width='2'/></g></svg>
6. Download this theme Icon
Replace the given SVG above this code <span class='n' itemprop='name'>Download this
theme</span>
<svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17' stroke-width='2'/><line x1='12' x2='12' y1='12' y2='21' stroke-width='2'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29' stroke-width='2'/></svg>
7. Home Icon
Replace the given SVG blow this code <b:includable id='home-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.400000, 2.000000)'><line class='svgC' x1='6.6787' x2='12.4937' y1='14.1354' y2='14.1354' stroke-width='2'/><path d='M1.24344979e-14,11.713 C1.24344979e-14,6.082 0.614,6.475 3.919,3.41 C5.365,2.246 7.615,0 9.558,0 C11.5,0 13.795,2.235 15.254,3.41 C18.559,6.475 19.172,6.082 19.172,11.713 C19.172,20 17.213,20 9.586,20 C1.959,20 1.24344979e-14,20 1.24344979e-14,11.713 Z' stroke-width='2'/></g></svg>
8. Nav Icon
Replace the given SVG blow this code <!--<svg class='line' viewBox='0 0 24 24'><line x1='3'
x2='21' y1='12' y2='12'/><line x1='3' x2='21' y1='5'
y2='5'/><line x1='3' x2='21' y1='19'
y2='19'/></svg>-->
<svg class='line' viewBox='0 0 24 24'>
<g class='h1'><path d='M 3 18 H 14' stroke-width='2'/><path d='M 10 6 H 21' stroke-width='2'/><line class='svgC' stroke-width='2' x1='3' x2='21' y1='12' y2='12'/></g>
<g class='h2' transform='translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0' stroke-width='2'/></g>
<g class='h3' transform='translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0' stroke-width='2'/></g>
</svg>
Conclusion
I hope you like this Nevbar 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
