Notifications
Clear all

Replacing the remainder of Font Awesome

4 Posts
2 Users
0 Likes
1,013 Views
Posts: 52
Topic starter
(@mikequinn)
Trusted Member
Joined: 5 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");
}
3 Replies
Posts: 52
Topic starter
(@mikequinn)
Trusted Member
Joined: 5 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");
Reply
Posts: 52
Topic starter
(@mikequinn)
Trusted Member
Joined: 5 years ago

I changed the

.fa-clock

to

.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.

Reply
1 Reply
Astghik
Admin
(@astgh)
Joined: 6 years ago

Illustrious Member
Posts: 5872

@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.  

Reply
Share:
Scroll to top