Site logo

Archived topic

icons on nav menu

12 replies · Started by liorsade8 on September 30, 2017

Viewing posts 1–13 of 13

hello
i managed to add icons to the nav menu

with this code:

add_action( 'generate_inside_mobile_header','tu_mobile_header_html' );
function tu_mobile_header_html() { ?>
    <div class="mobile-header-content">
         <i class="fa fa-phone"></i>
         <i class="fa fa-facebook"></i>
    </div>
<?php }

but when i do it <a herf.... clickable like:

<a href="tel:072-2150666" target="_blank" rel="noopener noreferrer"><i class="fa fa-phone"></i></a>
<a href="www.facebook.com" target="_blank" rel="noopener noreferrer"><i class="fa fa-facebook"></i></a>

it shows them vertical and not HORIZONTAL as i want it to be.
please help me understand how to make them horizontal with spacing between them and also clickable.
here is a picture:
https://postimg.org/image/sw25cuf9n/

also,
if i want to put an img instead of an font awesome - what is the code for that? and where should i upload the img and where to call it from... link i mean...
thanks

Can you link me to the page possibly?

To do an image, you can do this:

<a href="tel:072-2150666" target="_blank" rel="noopener noreferrer"><img src="URL TO YOUR IMAGE" /></a>

this is the code i put in functions.php:

add_action( 'generate_inside_mobile_header','tu_mobile_header_html' );
function tu_mobile_header_html() { ?>
<div class="mobile-header-content">
<i class="fa fa-phone"></i> | <i class="fa fa-facebook"></i> | <img src="https://www.uplaw.co.il/wp-content/uploads/2017/06/waze.png" alt="" width="38" height="40" /></a
</div>
<?php }

now, if i'll put:

<a href="tel:072-2150666" target="_blank" rel="noopener noreferrer"><i class="fa fa-phone"></i></a> | <a href="//?ll=31.787739,35.203435&navigate=yes" target="_blank" rel="noopener noreferrer"><img src="https://www.uplaw.co.il/wp-content/uploads/2017/06/waze.png" alt="" width="15" height="15" /></a> | <a href="mailto:uri@uplaw.co.il" target="_blank" rel="noopener noreferrer"><i class="fa fa-envelope"></i></a>

they will be vertical and not horizontal

heheh i know!
but this isn't clickable links.... just icons.... not <a href ...
which i want it to be.
when i do them clickable they go vertical
look now
http://ehud.s178.upress.link/

thanks

hi
i have added:
.mobile-header-content a {
display: inline-block;
}

or

.mobile-header-content a {
display: inline;
}

and it's showing horizontal....
but now the toggle menu has droped a line....

Try adding this as well:

.mobile-header-content {
    display: inline-block;
}

yes i did
but now the toggle had dropped to another line.... please help :)

hey, yes, i figured it out
i needed to do:

.mobile-header-content {
display: inline-block;
}
and also

.mobile-header-content a{
display: inline-block;
}

and it worked.
thanks

Awesome :)

This archived topic is closed to new replies.