Phone and email icon next text in heder extra elements

Hey vrhgmt744p,

Thank you for the inquiry.

You can enter these shortcodes in the phone info field.

Phone:

[av_font_icon icon='phone' font='svg_entypo-fontello' style='' caption='' size='40px' position='left' color='' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' av_uid='av-mds9v1ky' sc_version='1.0' admin_preview_bg=''][/av_font_icon]

Email:

[av_font_icon icon='ue805' font='entypo-fontello' style='' caption='' size='40px' position='left' color='' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' av_uid='av-mds9wcyi' sc_version='1.0' admin_preview_bg=''][/av_font_icon]

Let us know the result.

Best regards,
Ismael

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.phone-info .avia-icon-pos-left {
    float: none;
    display: inline;
}
.phone-info .avia-icon-pos-left .av-icon-char {
	font-size: 14px;
	line-height: 18px;
}
.phone-info .avia-icon-pos-left.av_font_icon.av-mds9wcyi-0057de6c5f2e63955f80107ffd4df8b8 {
	 margin-left: 10px;
}
#top .phone-info .avia-svg-icon.avia-font-svg_entypo-fontello svg:first-child {
    fill: #fff;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

Thank you for the update.

Please include this css code to center-align the items in the phone info container:

#top #header_meta .phone-info div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#top #header_meta .phone-info div .avia-icon-pos-left {
    margin-left: 10px;
    top: 0;
    position: relative;
}

Result:

View post on imgur.com

Best regards,
Ismael