Add font awesome icon in title on page

Hi there!

I am working on a website. Now I would like to add icons to titles.

I have been using the option to add a font awesome icon to the Services Widget. I have a page (Diensten which means Services in Dutch) and on this page I would like to add the same icons to the titles on the left side. Is this possible?

I am using the website editor. So I am using lines and Widgets for every page. On the Page ‘Diensten’ I am using the widget ‘Sydney FP: List’. This is where I want to add an icon to the title.

I figured I would probably have to use some CSS. Do I put the code in this widget?

Link to page: http://www.verbindendatloont.nl/diensten/

Thanks in advance!

Hello @barbarak,

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

.widget-title::before {
    font-family: FontAwesome;
    padding: 0 10px;
}

#panel-20-1-0-0 .widget-title::before {
    content: '\f153';
}

#panel-20-1-0-2 .widget-title::before {
    content: '\f2bd';
}

#panel-20-1-0-4 .widget-title::before {
    content: '\f004';
}

#panel-20-1-1-0 .widget-title::before {
    content: '\f080';
}

#panel-20-1-1-2 .widget-title::before {
    content: '\f1d7';
}

#panel-20-1-1-4 .widget-title::before {
    content: '\f0c0';
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman!

Thank you! This works great!

You are welcome @barbarak! :slight_smile:

Kind Regards, Roman.

Hi!

I have another question related to this.

Is it possible to add circles around the Icons? So they look the same as on the homepage?

Thanks in advance!

Sure, please try to use this CSS code instead of previous:

.widget-title::before {
    font-family: FontAwesome;
    padding: 0 10px;
    color: #1845d3;
    border: 1px solid #1845d3;
    border-radius: 50%;
    height: 55px;
    width: 55px;
    display: inline-block;
    line-height: 55px;
    margin: 0 10px;
}

#panel-20-1-0-0 .widget-title::before {
    content: '\f153';
}

#panel-20-1-0-2 .widget-title::before {
    content: '\f2bd';
}

#panel-20-1-0-4 .widget-title::before {
    content: '\f004';
}

#panel-20-1-1-0 .widget-title::before {
    content: '\f080';
}

#panel-20-1-1-2 .widget-title::before {
    content: '\f1d7';
}

#panel-20-1-1-4 .widget-title::before {
    content: '\f0c0';
}

Kind Regards, Roman.

You are a hero Roman!

This is perfect! Thank you so much!

Great! You are welcome @barbarak :slight_smile:

Kind Regards, Roman.

Hi, I would like some assistance as to how I can use similar code to be able to display an awesome icon, which appears the same as all other awesome icons when adding text to a SiteOrigin pagebuilder widget.

I would like to add the icon at the beginning of the text block and then have the text flow around the icon by padding the icon 10px or 15px right and bottom.

Is this possible and how could it be done.

Thanks in anticipation.

Hello,

It looks like this issue requires some coding and testing, this goes beyond our support policy. It’s considered advanced customization. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork.

Kind Regards, Roman.