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";
    }
}
8 Likes

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

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

<script>
  (function() {
    setTimeout(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)
  })();
</script>

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

Perhaps this is the new answer: Change the Like icon

2 Likes

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:

6 Likes