Logo position problem

i would do it with this code in telephone extra input field:

<a href="https://link-to-map"><span class="map">XXX</span></a><a href="https://link-to-contact"><span class="contact">YYY</span></a><a href="tel:+492289768293"><span class="tel">ZZZ</span></a>

And this would be my quick css entry for it:

.phone-info {
    float: left !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.responsive #header_meta .phone-info span {
    color: #aaa;
    margin-left: 15px;
}

.phone-info span::before {
    font-family: entypo-fontello;
    font-size: 24px;
    padding-right: 5px;
    position: relative;
    top: 4px;
}
.map::before { content: "\e842"}
.contact::before { content: "\e805"}
.tel::before { content: "\e854"}

you need to adjust that to your needs.
F.e. if you like to colorize the icons:
replace the part above with:

.map::before { content: "\e842"; color: #900}
.contact::before { content: "\e805"; color: #090}
.tel::before { content: "\e854"; color: #009}

see here example: https://webers-testseite.de/

• This reply was modified 5 years, 9 months ago by Guenni007.

Yes but the links are not working – you don’t like the links to be set?
by the way: if you like to have more distance between the spans in responsive case add line-height attribut:

.responsive #header_meta .phone-info span {
    color: #fff;
    margin-left: 15px;
    line-height: 25px;
}