title: Adding vector icon font to website header name?
body: <p>I want to design my website header using vector swirls, i have added @font-face with required font files. </p>
  
  <p>Here is my header.php code and i want to use vector swirls on top and bottom of site-branding class</p>
  
  <pre><code>&lt;header id="masthead" class="site-header" role="banner"&gt;
          &lt;span class="site-branding-design"&gt;&lt;/span&gt;
          &lt;div class="site-branding"&gt;
              &lt;h1 class="site-title"&gt;&lt;a href="&lt;?php echo esc_url( home_url( '/' ) ); ?&gt;" title="&lt;?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?&gt;" rel="home"&gt;&lt;?php bloginfo( 'name' ); ?&gt;&lt;/a&gt;&lt;/h1&gt;
              &lt;h2 class="site-description"&gt;&lt;?php bloginfo( 'description' ); ?&gt;&lt;/h2&gt;
          &lt;/div&gt;
          &lt;span class="site-branding-design"&gt;&lt;/span&gt;
          &lt;nav id="site-navigation" class="main-navigation" role="navigation"&gt;
              &lt;h1 class="menu-toggle"&gt;&lt;?php _e( 'Menu', 'minima-royale' ); ?&gt;&lt;/h1&gt;
              &lt;div class="screen-reader-text skip-link"&gt;&lt;a href="#content" title="&lt;?php esc_attr_e( 'Skip to content', 'minima-royale' ); ?&gt;"&gt;&lt;?php _e( 'Skip to content', 'minima-royale' ); ?&gt;&lt;/a&gt;&lt;/div&gt;
  
              &lt;?php wp_nav_menu( array( 'theme_location' =&gt; 'primary' ) ); ?&gt;
          &lt;/nav&gt;&lt;!-- #site-navigation --&gt;
      &lt;/header&gt;&lt;!-- #masthead --&gt;
  </code></pre>
  
  <p><strong>CSS Code:-</strong></p>
  
  <pre><code>.site-branding-design{
      font-family: 'Conv_Nymphette';
      font-size: 16px;
      content: "a";
  }
  </code></pre>
  
  <p>Character Map of Font
  <a href="http://www.fontspace.com/nymphont/nymphette/11741.charmap" rel="nofollow">http://www.fontspace.com/nymphont/nymphette/11741.charmap</a></p>