How to replace an icon using CSS

#1

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>
0 Likes

(Kris) #2

Similar to this answer

So, in your case:

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

(Jeff Atwood) closed #3
0 Likes

opened #4
0 Likes

(Allen - Watchman Monitoring) #5

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?

0 Likes

Where can I find a list of icons used by Discourse?
(Allen - Watchman Monitoring) #6

Perhaps this is the new answer: Change the Like icon

2 Likes