Using Font Awesome Icons in Footer Widgets

  • Resolved jrothra

    (@jrothra)


    7 years, 8 months ago

    I read about adding a class to incorporate Font Awesome icons, but it’s not working the way I want.

    I added a text widget (using both the WordPress “Text” widget and Site Origin’s “Editor” widget — made no difference) to footer 3. Here’s the text I entered:

    <div class="fa fa-mobile-phone"></div> 555-555-5555
<div class="fa fa-twitter"> @twitter-name</div>

    As you can see, the first one has the phone outside the div; the second is inside the div. The result isn’t desirable. The first one moved the phone number below the icon. For the second, it changed the font face. In both cases the icon is tiny. You can see what I mean in this screen shot: https://goo.gl/vakCRQ

    (This isn’t a ‘live’ site, so to block search engines from finding it, I’m not adding the URL).

    Here’s what I want:
    1. Icon to the left of the text
    2. Larger icons

    I can do this via CSS using ::before by finding the exact class/id using Chrome Dev Tools. However, I was hoping to avoid that.

    Any other ideas?

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi,

    To have larger icons you can use the special classes from fontawesome, explained here https://fontawesome.io/examples/ for example:
    https://prntscr.com/fl6ft7

    And if you want to have the texts a little bit lower than the icons, you can add some inline style like in the example above.
    Please let me know if that helps.

    Regards,
    Rodica

    • This reply was modified 7 years, 8 months ago by rodicaelena.
    Thread Starter jrothra

    (@jrothra)

    Rodica,

    Thank you for the reply, but you didn’t address two key issues:

    1. When the text is inside the div, the font changes from the theme’s default font (does not happen outside the div); this seems to be a problem with the theme, not Font Awesome.
    2. When the text is outside the div (and thus the right font), it moves down a line.

    You can see what I’m going for on my current site’s footer: https://www.johnrothra.com

    @jrothra by default <div> tag is a block level tag which means its will clear both left and right content, but the display: inline-block form FA should fix that.

    There is possibility that the number had being wrap by <p> like below after you have save the widget unless you uncheck the Automatically add paragraphs option

    <div class="fa fa-mobile-phone"></div>
<p>555-555-5555</p>
<div class="fa fa-twitter">@twitter-name</div>

    Also note that “Text” widget and Site Origin’s “Editor” widget are not the same.
    WP Text Widget gives you ordinary text, while Site Origin’s “Editor” widget will give you Rich-text editor which can convert your text to have basic html output

    • This reply was modified 7 years, 8 months ago by goodmuyis.
    Thread Starter jrothra

    (@jrothra)

    @goodmuyis —

    but the display: inline-block form FA should fix that.

    It didn’t. The code you see in the OP is exactly what I used.

    There is possibility that the number had being wrap by <p> . . . unless you uncheck the Automatically add paragraphs option

    I tried it with the Auto paragraphs on and off, it made no difference.

    Also note that “Text” widget and Site Origin’s “Editor” widget are not the same.

    As I said in the OP, “using both the WordPress ‘Text’ widget and Site Origin’s ‘Editor’ widget — made no difference.”

    • This reply was modified 7 years, 8 months ago by jrothra.
    Thread Starter jrothra

    (@jrothra)

    @goodmuyis —

    I just updated my main site to WP 4.8 and noticed that the default WP text widget is now also rich text (emphasis added):

    Rich Text Widget

    This feature deserves a parade down the center of town! Rich-text editing capabilities are now native for Text widgets. Add a widget anywhere and format away. Create lists, add emphasis, and quickly and easily insert links. Have fun with your newfound formatting powers, and watch what you can accomplish in a short amount of time.

    @jrothra
    I Hardly use the WP text widget, I prefer black-studio-tinymce-widget

    OK try this for your footer-widget, if you still want, You as well add <a> inside the span

    HTML

    <div><i class="fa fa-mobile-phone"></i> <span class="fa-text">555-555-5555</span></div>
<div><i class="fa fa-envelope-o"></i> <span class="fa-text">Message</span></div>
<div><i class="fa fa-twitter"></i> <span class="fa-text">@twitter-name</span></div>

    CSS

    footer .fa {
    width: 19px;
    font-size: 21px;
    margin-right: 15px;
    color: #aaa;
}
footer span{
    font-size: 18px;
    color: #aaa;
}

    Note that some tag will be strip off by wordpress editor when you switch Text and Visual Editor, tags like <p> <span> and some i dont know yet. The only solution I have being using is to add css class to them just as I did bove

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Using Font Awesome Icons in Footer Widgets’ is closed to new replies.