Search…

X3 Photo Gallery Support Forums

Search…
 
mrSLK
Topic Author
Posts: 16
Joined: 10 Sep 2016, 00:25

Adjusting icon line

23 Nov 2019, 02:04

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 2991 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 2991 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
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Adjusting icon line

23 Nov 2019, 22:29

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?
 
mrSLK
Topic Author
Posts: 16
Joined: 10 Sep 2016, 00:25

Re: Adjusting icon line

24 Nov 2019, 19:38

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/ 
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Adjusting icon line

24 Nov 2019, 21:05

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
 
mrSLK
Topic Author
Posts: 16
Joined: 10 Sep 2016, 00:25

Re: Adjusting icon line

26 Nov 2019, 02:26

Such a silly mistake, sorry to trouble your time

Thank You Karl