Font Awesome Icons not Displaying, Author Box / Integrity Stack

[fantasy_5]

Hi!

I used all of the necessary code and they appear then disappear. I’ve cleared the cache on the website, my browser, and in my C panel. They appear when the page is loading then disappear on full load. I would also like to know how to put a border around the author box, increase the size of the icons and the amount of space in between them. My website Shop At Kei is not live yet so I am sending a secure note. Thanks.

Please see this thread https://theme.co/apex/forum/t/font-awesome-icons-not-working-author-bio-box-integrity-stack/31809/3

[paul.r]

Hi,

We updated FontAwesome with the latest release. Version 5 required changes to the markup, CSS, and the file location changed. Your code is using old markup which no longer works.

I went ahead and change it to use the new markup
eg. I changed this <i class="fa fa-youtube"></i> with <i class="fab fa-youtube"></i>

https://fontawesome.com/icons/twitter?style=brands

Kindly check in your end

Thanks

[fantasy_5]

Thank you! I would also like to know how to put a border around the author box, increase the size of the icons and the amount of space in between them.

[basanta]

Hi There,

Thanks for writing in again!

I can see there is a border in your blog author box. Please check the screenshot in secure note.
Not sure if you are talking about other pages. Please . confirm.
or you can send the URL where you have the author box.

Thanks

[fantasy_5]

Hi!

Yes, there is a border around the author box on that particular website. I used the same code for my website Shop At Kei. However, the border does not appear there.

The website is Shop At Kei and here is a post link where you can view the author box Fashion Addict I will send the login credentials in a secure note as this website is not live. The idea is to get the author box the same as in the screenshot link you provided, in terms of background color, avatar, and text neatness.

[paul.r]

Hi,

To achieve that, you can add the code below in Theme Options > CSS

.author_bio_section {
    border: 1px solid #dcdcdc;
    padding: 20px;
    background-color: #f4f4f4;
}

.author_bio_section #author-social-handle {
    padding-right: 5px;
}

.author_bio_section .author_details img {
    float: left;
    margin-right: 20px;
}

.author_bio_section .author_name {
    clear: both;
    line-height: 55px;
}

I’ll list below some CSS/HTML resources that should help you to carry on these modifications on your own in the future:

Hope these helps