Bullet Points not Rendering Correctly in blog and Social Icons for Author have disappeared.

SOLVE
JCMO_Kayleigh
Participant

I am new to Hubspot and have been trying to create our blog, I've managed to sort out most of it on my own, however, I can't figure out how to solve two issues.

 

The bullet points are rendering as squares in my blog when they should be circles as can be seen below:

 

Screen Shot 2019-04-04 at 12.17.29.png

 

Also, in the same blog template, the social media icons have disappeared from the circles itself within the Author section. The links still work, as does the hover state the icons just aren't there.

 

Screen Shot 2019-04-04 at 12.17.43.png

 

Any help, comments or suggestions would be greatly appreciated! 

 

Thank you in advance!

 

Kayleigh

0 Upvotes
1 Accepted solution

Accepted Solutions
lindseynwmn
Solution
Contributor

Hey Kayleigh,


Ok so just to make sure i understand what you are trying to acheive: Do you want the list to be styled as just a normal list with the default circles or were you trying to get one of the font awesome icons to replace the default bullets?  The way you have it setup right now the default bullet is overridden by CSS to be the font awsome icon of a circle with a checkmark in it.  

 

As for the social icons. When i view the source code of your page i can see this for the social section: 

 

<div class="hs-author-social-section">
    <!-- <span class="hs-author-social-label">Find me on:</span> -->
    <div class="hs-author-social-links">
        <a href="https://www.linkedin.com/in/kayleigh-walter-1808/" target="_blank" class="hs-author-social-link accentColor1"><i class="fa fa-linkedin"></i></a>

        <a href="https://twitter.com/W8_Kayleigh" target="_blank" class="hs-author-social-link accentColor1"><i class="fa fa-twitter"></i></a>

    </div>
</div>

Those icons need to be changed the the correct text that i included on the last post. Without knowing how your pages are constructed it's a bit difficult to instruct you on where to find that code to change. How is that information pulled in? Can you view the page/blog template for that page and find the existing code?

View solution in original post

0 Upvotes
8 Replies 8
jennysowyrda
Community Manager

Hi @JCMO_Kayleigh,

 

Do you have a public link to the blog you are working on so we can take a look at a live example and investigate what could be causing this? 

 

The more information, screenshots, and details you can provide, the better the Community can assist!

 

Thank you,

Jenny

0 Upvotes
JCMO_Kayleigh
Participant

Hi Jenny,

 

Thank you so much for reaching out, I've been struggling with this for weeks. 

 

I have just published this page live so you can have a look, the link is here.

 

I am new to HubSpot and have been working in the Design Manager to get the page looking how I want it too, amending fonts and colours in the blogs style guide. I don't know if this could have somehow had an effect on these elements. 

 

If you need any more detailed information, let me know and I will do my best to provide it.

 

Thank you,

 

Kayleigh

0 Upvotes
lindseynwmn
Contributor

Hi Kayleigh,

 

Looks like your issues are all related to some problems with font awesome. For starters, you’ll need to include the css stylesheet for font awesome somewhere in your <head>.

 

Their most recent version’s CDN you can use is:

 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

 

Once that’s loaded you can fix the css/html to get the icons showing. In your stylesheet you have:

 

.hs_cos_wrapper_type_rich_text ul li:before {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f058";
    margin-right: 8px;
    font-size: 18px;
}

 

Fix the font-family line to be:  

font-family: 'Font Awesome\ 5 Free';

 

That change, plus linking the stylesheet, should get the circles in your list element fixed.  For the twitter/linkedin icons you’ll need to update your HTML. Font Awesome has changed the wording on those to be:

 

<i class="fab fa-linkedin-in"></i>

<i class="fab fa-twitter"></i> 

 

JCMO_Kayleigh
Participant

Hi!

 

Thank you so much for your help! The changes you suggested allowed me to get the bullet points back within my blog post but they only appear as circles with ticks in them? That is better than the squares, but none of the other in post options works.

 

Regarding the social icons, however, I'm not sure what you mean by updating the HTML as I can't figure out how to find the HTML linking to the 'About the Author' section.

 

Sorry if I'm just missing something!

 

Thank you again for helping!

 

Kayleigh

0 Upvotes
lindseynwmn
Solution
Contributor

Hey Kayleigh,


Ok so just to make sure i understand what you are trying to acheive: Do you want the list to be styled as just a normal list with the default circles or were you trying to get one of the font awesome icons to replace the default bullets?  The way you have it setup right now the default bullet is overridden by CSS to be the font awsome icon of a circle with a checkmark in it.  

 

As for the social icons. When i view the source code of your page i can see this for the social section: 

 

<div class="hs-author-social-section">
    <!-- <span class="hs-author-social-label">Find me on:</span> -->
    <div class="hs-author-social-links">
        <a href="https://www.linkedin.com/in/kayleigh-walter-1808/" target="_blank" class="hs-author-social-link accentColor1"><i class="fa fa-linkedin"></i></a>

        <a href="https://twitter.com/W8_Kayleigh" target="_blank" class="hs-author-social-link accentColor1"><i class="fa fa-twitter"></i></a>

    </div>
</div>

Those icons need to be changed the the correct text that i included on the last post. Without knowing how your pages are constructed it's a bit difficult to instruct you on where to find that code to change. How is that information pulled in? Can you view the page/blog template for that page and find the existing code?

View solution in original post

0 Upvotes
JCMO_Kayleigh
Participant

Sorry for taking so long to get back to you.

 

I am happy with the tick marks, I just noticed I couldn't change them and wondered if there was an error on my part.

 

After looking back at this chain and reading through it again and working my way through Hubspot CMS, I have now managed to solve the issues I was having. Thank you so much for all of your help.

0 Upvotes
TaraLeigh
Member

I found this post in looking for a solution myself. Here are how the bullets show up in our blog:

Screen Shot 2020-01-27 at 3.52.02 PM.png

Here's a link to the blog article:

https://www.sharprint.com/blog/dtg-blog

 

I don't like that the bullet points show in red because our text links also show in red. I'm not sure where to make the distinction.

 

I'd also like the circles with the check to be regular bullets. Is that something simple to adjust in settings?

 

Any help is appreciated!!

0 Upvotes
Walton2485
Participant

Would also like to know the answer to this. I just want regular circular black/clear bullet points. Not the green ticks/check marks. Is this possible??

0 Upvotes