Home>Support>Replace Origami icons with Fa icons

Replace Origami icons with Fa icons

By David Dumonde, 9 years ago. Last reply by Support Assistants, 9 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

I am enjoying working with Origami Premium and I am able to make most of the changes I want using your amazing SiteOrigin CSS editor.

Now I would like to replace the tag and arrow icons at the bottom of the footer with Font Awesome icons. I see where the Origami icons are being inserted in loop.php, but I’m not sure of the proper way to go about making this change without editing loop.php. I suppose I need a function of some kind. Could you point me in the right direction?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 7 months ago Greg Priday
    Hi, I Work Here

    Hi David

    Very glad to hear you’re enjoying both Origami and SiteOrigin CSS (I’m particularly proud of that plugin).

    Unfortunately, this kind of change would be fairly complex and fall into the realm of custom coding. If you’d like to go this route, I’d suggest hiring a developer over on Codeable.

    I’m going to send this thread over to our customization team to see if they have any ideas on how this could be done quickly and easily. I’ll let you know what they have to say.

  2. 9 years, 7 months ago Support Assistants

    Hi David

    You could add Font Awesome by using the following child theme:

    https://siteorigin.com/wp-content/uploads/2015/12/origami-child-fa1.zip

    Download and install via Appearance > Themes > Add New: Upload Theme. It’s normal for menu location and Customizer settings to reset when activating a child theme.

    Next, add the following to Appearance > Custom CSS:

    .post .below-content .origami-icon-more {
	margin-top: -6px;
}

.origami-icon-more:before {
	content: "\f061";
	font-family: "FontAwesome";
	font-size: 15px;
}

.post .below-content .origami-icon-tag {
	margin-top: -6px;
}

.origami-icon-tag:before {
	content: "\f02c";
	font-family: "FontAwesome";
	font-size: 15px;
}

    Let us know how that goes.

  3. 9 years, 7 months ago David Dumonde

    Awesome! That worked perfectly! Thank you so much for the kind assistance!
    :-)

  4. 9 years, 7 months ago Support Assistants

    Hi David

    We’re really glad to hear that helped.

    All the best with your website.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More