Notifications

Clear all

Limited Support

Our team is currently on holiday, so support will be limited during this period. Response times may be slower than usual, and some inquiries may be delayed. We appreciate your patience and understanding, and we’ll resume our usual support by the end of August.

Replacing the remainder of Font Awesome

wpDiscuz Official Addons

Last Post by Astghik 4 years ago

4 Posts

2 Users

0 Reactions

1,722 Views

RSS

Posts: 52

MikeQuinn

Topic starter

Jan 17, 2022 10:36 am

(@mikequinn)

Trusted Member

Joined: 6 years ago

So the Font Awesome icons for the main plugin were replaced by SVGs during one of the major updates. All of the Font Awesome icons are in a library as svgs. I was going to replace them using the methods found at the bottom of this older thread: https://wordpress.org/support/topic/request-please-use-custom-icons-font-instead-of-whole-font-awesome-library/

I figured out how to make the SVGs, but I can't get it to work.

The SVG code that I create using Inkscape looks like:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="2048" height="1792" version="1.1" viewBox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg">
 <path d="m1024 830.27q1.2872 0 2.2013 0.91405 0.914 0.91405 0.914 2.2013t-0.914 2.2013q-0.9141 0.91405-2.2013 0.91405t-2.2013-0.91405-0.9141-2.2013 0.9141-2.2013 2.2013-0.91405zm7.6153-4.5q1.1466 0 1.9579 0.81129t0.8113 1.9579v9.6922q0 1.1466-0.8113 1.9579t-1.9579 0.81129h-15.231q-1.1466 0-1.9579-0.81129t-0.8113-1.9579v-9.6922q0-1.1466 0.8113-1.9579t1.9579-0.81129h2.423l0.5517-1.4711q0.2056-0.53004 0.7518-0.91405 0.5463-0.38401 1.1196-0.38401h5.5384q0.5733 0 1.1196 0.38401 0.5462 0.38401 0.7518 0.91405l0.5516 1.4711zm-7.6153 12.461q2.0012 0 3.4236-1.4225 1.4225-1.4225 1.4225-3.4236t-1.4225-3.4236q-1.4224-1.4225-3.4236-1.4225t-3.4236 1.4225q-1.4225 1.4225-1.4225 3.4236t1.4225 3.4236q1.4224 1.4225 3.4236 1.4225z" style="stroke-width:.010817"/>
</svg>

One of the SVGs from that thread looks like this:

.fa-clock {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E");
}

Topic Tags

3 Replies

Posts: 52

MikeQuinn

Topic starter

Jan 17, 2022 10:38 am

(@mikequinn)

Trusted Member

Joined: 6 years ago

So I make mine look like this:

.fa-paperclip {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 1792'%3E%3Cpath d='m1024 830.27q1.2872 0 2.2013 0.91405 0.914 0.91405 0.914 2.2013t-0.914 2.2013q-0.9141 0.91405-2.2013 0.91405t-2.2013-0.91405-0.9141-2.2013 0.9141-2.2013 2.2013-0.91405zm7.6153-4.5q1.1466 0 1.9579 0.81129t0.8113 1.9579v9.6922q0 1.1466-0.8113 1.9579t-1.9579 0.81129h-15.231q-1.1466 0-1.9579-0.81129t-0.8113-1.9579v-9.6922q0-1.1466 0.8113-1.9579t1.9579-0.81129h2.423l0.5517-1.4711q0.2056-0.53004 0.7518-0.91405 0.5463-0.38401 1.1196-0.38401h5.5384q0.5733 0 1.1196 0.38401 0.5462 0.38401 0.7518 0.91405l0.5516 1.4711zm-7.6153 12.461q2.0012 0 3.4236-1.4225 1.4225-1.4225 1.4225-3.4236t-1.4225-3.4236q-1.4224-1.4225-3.4236-1.4225t-3.4236 1.4225q-1.4225 1.4225-1.4225 3.4236t1.4225 3.4236q1.4224 1.4225 3.4236 1.4225z'/%3E%3C/svg%3E");

Posts: 52

MikeQuinn

Topic starter

Jan 17, 2022 10:43 am

(@mikequinn)

Trusted Member

Joined: 6 years ago

I changed the

.fa-clock

.fa-paperclip

And then I cut n pasted the viewbox data in and then everything between d=" and ".
When I add this to my theme's style.css nothing happens. Also tried the customizer and the WPDiscuz's built in CSS box.

Anyone a SVG and CSS expert that can clue me in on what I'm doing wrong?

BTW, the new graphic plots a black camera rather than a gray paperclip. My audience is older and they don't always get the paperclip icon. Replacing that icon is the real reason I started messing with the first place. Not having to load font awesome would be secondary benefit.

This post was modified 4 years ago by MikeQuinn

1 Reply

Astghik

Admin

(@astgh)

Joined: 8 years ago

Illustrious Member

Posts: 6444

Jan 18, 2022 11:45 am

Reply to

MikeQuinn

@mikequinn,

Currently, there is no option that'll allow you easily replace all the Font-awesome icons with SVG once. However, I've asked the developers to take this into consideration for future updates.