如何使用 CSS 将电子邮件和地址添加到预安装的 wordpress 主题答案

【问题标题】：How to add e-mail and address to a pre-installed wordpress theme using CSS如何使用 CSS 将电子邮件和地址添加到预安装的 wordpress 主题
【发布时间】：2018-08-11 23:23:43
【问题描述】：

我想使用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>

【问题讨论】：

标签： html css wordpress

【解决方案1】：

您可以使用 fontawesome 来使用电子邮件和电话图标

【讨论】：

是的，但我想先添加文本。

【解决方案2】：

您好，您可以使用 :after 选择器。希望此链接对您有所帮助Align Text Beside FontAwesome Icon

如果你想先添加文本，你可以在 CSS 中使用 :before 选择器到你有你的图标的标签。

【讨论】：