title: How would I replace these icons with text instead?
body: <p>I'd like to have 3 letter acronyms in the circles instead of icons. Here is the <a href="https://codepen.io/hadarweiss/pen/WvEXeK" rel="nofollow noreferrer">CodePen link</a>. </p>
  
  <pre><code>%nav.menu
    %input#menu-toggler.menu-toggler{:type =&gt; "checkbox", :checked =&gt; "checked"}
    %label{:for =&gt; "menu-toggler"}
    %ul
      %li.menu-item
        %a.fa.fa-facebook{:href =&gt; "https://www.facebook.com/", :target =&gt; "_blank"}
      %li.menu-item
        %a.fa.fa-google{:href =&gt; "https://www.google.com/", :target =&gt; "_blank"}
      %li.menu-item
        %a.fa.fa-dribbble{:href =&gt; "https://dribbble.com/", :target =&gt; "_blank"}
      %li.menu-item
        %a.fa.fa-codepen{:href =&gt; "https://codepen.io/", :target =&gt; "_blank"}
      %li.menu-item
        %a.fa.fa-linkedin{:href =&gt; "https://www.linkedin.com/", :target =&gt; "_blank"}
      %li.menu-item
        %a.fa.fa-github{:href =&gt; "https://github.com/", :target =&gt; "_blank"}
      %li.menu-item
        %a.fa.fa-github{:href =&gt; "https://github.com/", :target =&gt; "_blank"}
  </code></pre>