Navigation
Archive / Stacking Icons with x-icon or Font Awesome
This is archived content. Visit our new forum.
  • Author
    Posts
  • September 30, 2014 at 11:58 am #115727

    Darcy P
    Participant

    I can’t seem to find any examples of how to stack the icons when using the “icon” shortcode. I even added Font Awesome manually by referring to this thread: http://theme.co/x/member/forums/topic/full-font-awesome-icon-list/#post-67880

    and while I can access and use the icons from 4.2, the stacking feature does not seem to work. In visual composer, I add a “text” box and then within the text view of the WYSIWYG editor, I add code like this:

    <span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

    but the icons do not stack. They simply show one after another. And if I try to use code like this

    <i class="fa fa-shield"></i> normal<br>

    It simply gets scrubbed out.

    Can anyone lend a helping hand?

    Thanks!

    Can anyone help?

    September 30, 2014 at 12:49 pm #115755

    Kosher K
    Member

    Hi There,

    I’m not really sure if I understand you correctly? did you mean to display the icons in line?

    If so you should add them like this to avoid having affected with wordpress auto formatting.

    <span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-flag fa-stack-1x fa-inverse"></i></span>

    If that doesn’t help,

    Can you please provide url of your site and sample of what you’re trying to accomplish.

    Cheers

    September 30, 2014 at 3:18 pm #115906

    Darcy P
    Participant

    Hi, I tried that method before and even copied/pasted your code but the result was the same both ways. When I switched from Text to Visual mode in the WYSIWYG mode, the code was removed.

    I in fact looking to overlay two icons on top of each other as in the example here:

    http://fortawesome.github.io/Font-Awesome/examples/

    If you scroll down to the “Stacked Icons” section, you will see that I am looking to overlay a few icons as well as inverse them so I can have a black circle under a white flag or the red ban circle on the camera.

    I’ve tried using the Font Awesome method and it simply shows them one after another (not in a line but as it were shown in a page break).

    Thanks,
    D

    October 1, 2014 at 2:20 am #116142

    Paul R
    Moderator

    Hi Darcy,

    We need you to provide us with your URL This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

    Thanks

    October 2, 2014 at 10:33 am #117169

    Darcy P
    Participant

    Oddly, it is now working. I copied/pasted/used the same code from the other day and it is now working. I thought it might have been a Visual Composer vs Classic Editor issue but it works in both setups. Not sure what is different.

    My apologies for taking up your time on this. This can be closed. Thanks again.
    -D

    October 2, 2014 at 10:41 am #117177

    Cousett
    Member

    Glad we were able to help. 🙂 Have a nice day.

  • Author
    Posts