How would I replace these icons with text instead? : <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>
