How to replace an icon using CSS

Is it possible to replace the share icon in mobile using CSS?

I would like to replace it with the below font-awesome icon

<i class="fa fa-whatsapp" aria-hidden="true"></i>

Similar to this answer

So, in your case:

.mobile-view {
    .fa-link:before {
        content: "\f232";

Since Kris solved this issue, discourse has changed its use of icons.

We were able to use a javascript to replace an icon:

  (function() {
      locks = $(".category .badge-category.clear-badge.restricted .d-icon-lock, .badge-category.clear-badge.restricted .d-icon-lock, .category-list .category-text-title .d-icon-lock");
      locks.replaceWith('<svg class="fa d-icon d-icon-unlock-alt svg-icon svg-node" aria-hidden="true"><use xlink:href="#unlock-alt"></use></svg>');
    }, 10)

but wonder if there’s a better/more official way to get this done?

Perhaps this is the new answer: Change the Like icon


It’s no longer recommended to replace an icon using CSS, if it’s absolutely necessary it is technically possible if you hide the original and inline the new SVG using a pseudo selector… There’s an example here:

Note that the SVG will need dimensions added inline (e.g., width="15" height="15") if it doesn’t already have them, and it will need to be prefixed by data:image/svg+xml; utf8,

The new recommended method would be to use the theme API: