如何使用CSS向預先安裝的wordpress主題添加電子郵件和地址

Question

我想使用css在徽標旁邊添加電子郵件和電話號碼。 我還要顯示這些圖標。

現在我正在使用插件，但不滿意。

我的網站是www.medifastservices.com

我當前的代碼是：

<div class="container">
                <div class="site-branding">
                <div class="site-brand-inner has-logo-img"><div class="site-logo-div"><a href="https://www.medifastservices.com/" class="custom-logo-link  no-t-logo" rel="home" itemprop="url"><img width="170" height="53" src="https://www.medifastservices.com/wp-content/uploads/2018/08/ico-ambulance-e1533995942143.png" class="custom-logo" alt="MediFast Services" itemprop="logo" /></a></div></div>                </div>
                <div class="header-right-wrapper">
                    <a href="#0" id="nav-toggle">Menu<span></span></a>
                    <nav id="site-navigation" class="main-navigation" role="navigation">
                        <ul class="onepress-menu">
                            <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-11 current_page_item menu-item-41"><a href="https://www.medifastservices.com/">Homepage</a></li>
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="https://www.medifastservices.com/ambulance/">Ambulance</a></li>
<li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a href="https://www.medifastservices.com/courier/">Courier</a></li>
<li id="menu-item-86" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-86"><a href="tel:+35722100444">22100444</a></li>
                        </ul>
                    </nav>
                    <!-- #site-navigation -->
                </div>

Answer 1

您可以使用fontawesome來使用電子郵件和電話圖標

Answer 2

嗨，您可以使用：after選擇器執行類似操作。 希望此鏈接對您有幫助。 在FontAwesome Icon旁邊對齊文本

如果要首先添加文本，則可以在CSS中使用：before選擇器之前的圖標中使用標記。