Page 1 of 1

Adjusting icon line

Posted: 23 Nov 2019, 02:04
by mrSLK
Hi Karl, 

I'm working on a web https://ihfplaw.com, got 2 question that hopefully you'll be able to answer:
1. Needed some help to lineup icon that i use for the menu from Material icon - I think i found the answer for this but please correct if i'm wrong :)
How do i resize and line-up the icon so that it's on the same line (see pic below)
Screen Shot 2019-11-23 at 13.54.05.jpg
Screen Shot 2019-11-23 at 13.54.05.jpg (52.65 KiB) Viewed 3509 times

2. How can i make the Tab to have 2 different shades like your example here:
Screen Shot 2019-11-23 at 14.01.49.jpg
Screen Shot 2019-11-23 at 14.01.49.jpg (93.3 KiB) Viewed 3509 times

I use this code for the icon:
Code
<i class="material-icons">people</i> Our People

and 

on Settings --> Custom --> Custom <head> [html]
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Code
Answer:

.material-icons {
    vertical-align: -5px; /*Change this to adjust the icon*/
}
Thank You

Re: Adjusting icon line

Posted: 23 Nov 2019, 22:29
by mjau-mjau
Hi!
mrSLK wrote: 1. Needed some help to lineup icon that i use for the menu from Material icon - I think i found the answer for this but please correct if i'm wrong :)
How do i resize and line-up the icon so that it's on the same line (see pic below)
Seems you solved this already? Looks right to me. I would have suggested something similar.
mrSLK wrote:2. How can i make the Tab to have 2 different shades like your example here:
Screen Shot 2019-11-23 at 14.01.49.jpg
It should work like that by default. Do you have an example link where you are using this tabs layout?

Re: Adjusting icon line

Posted: 24 Nov 2019, 19:38
by mrSLK
mjau-mjau:
Hi!
mrSLK wrote: 1. Needed some help to lineup icon that i use for the menu from Material icon - I think i found the answer for this but please correct if i'm wrong :)
How do i resize and line-up the icon so that it's on the same line (see pic below)
Seems you solved this already? Looks right to me. I would have suggested something similar.
mrSLK wrote:2. How can i make the Tab to have 2 different shades like your example here:
Screen Shot 2019-11-23 at 14.01.49.jpg
It should work like that by default. Do you have an example link where you are using this tabs layout?

Yes, this page: https://ihfplaw.com/Our-People/ 

Re: Adjusting icon line

Posted: 24 Nov 2019, 21:05
by mjau-mjau
mrSLK wrote:Yes, this page: https://ihfplaw.com/Our-People/ 
You need to add the "vertical" class to the "tabs-content" container.
Code
<div class="tabs-content vertical">
Image

Re: Adjusting icon line

Posted: 26 Nov 2019, 02:26
by mrSLK
Such a silly mistake, sorry to trouble your time

Thank You Karl