CSS：用文本替换字体图标

Question

I have a header where buttons are displayed as font icons. I want to replace them with simple text for each button. Here's my code right now, how would I go about doing that? I hope I'm getting this right

<li class="wp_dashboard_tab_content_header_%1$s">
    <a href="#tab_wp_dashboard_tab_content_header_%1$s"
      id="wp_dashboard_tab_content_header_%1$s" 
      class="wp_dashboard_icon_header_%1$s wp_dashboard_icon">
        <span></span>
    </a>
</li>

In my CSS file I have, for example

.wp_dashboard_icon_header_home:before {
  content: "\e653";
}

Answer 1

You need to add to the specific element font-family . That's because by default, element who need to be render as font-icon has font-family which contains icon but no letters or numbers.

Try to set

.wp_dashboard_icon_header_home:before {
   font-family:Arial;
   content: "Some text";
}