Replace rtMedia's default media button dashicon with something else?

Hiya.

After an rtMedia update back in May, they decided to switch from Font Awesome icons to WordPress Dashicons, to my dismay.

Now the default media upload button has an icon that’s a camera overlaying a musical note (“f104” on this list). Well, the membership site that I’m building has music uploads switched OFF. There is only the capability of uploading photos and videos.

Since I don’t want to cause any confusion with what types of media members can upload, is there a way I can replace the dashicon with something else via CSS? Unfortunately there isn’t a photos+video dashicon, so I will probably just go with a regular camera one (“f306”:wink:. (Although…I’ll also have Font Awesome installed on this site too, so if there’s a way to add an FA icon instead, even better!!).

The rtMedia support is unavailable over the weekend, so I’m seeing if anyone here might have a solution. It would be greatly appreciated!!

Thanks.

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hiya, Anton!

    Sure thing, we can replace the icon with another dashicon fairly easily. We’d need input from rtMedia on replacing it with a Font Awesome icon, I think, but I would love to take a look under the hood to make sure it’s not a simple switch. If this is ok, just grant me temporary admin access to your site by clicking “Grant Access” button in the WPMU DEV Dashboard Settings from the following path and reply on this thread after granting it?

    Admin -> WPMU DEV -> Support -> Support Access Tab

    If you have not installed WPMU DEV Dashboard plugin yet, kindly do that here : https://premium.wpmudev.org/project/wpmu-dev-dashboard/ and then allow access as per the above process.

    Thanks, Anton!

  • Anton
    • The Incredible Code Injector

    Thanks, @michelle Shull!

    Sure thing, we can replace the icon with another dashicon fairly easily.

    YAY!

    We’d need input from rtMedia on replacing it with a Font Awesome icon, I think, but I would love to take a look under the hood to make sure it’s not a simple switch. If this is ok, just grant me temporary admin access to your site by clicking “Grant Access” button in the WPMU DEV Dashboard Settings from the following path and reply on this thread after granting it?

    Sure thing! I actually already granted support access to this site because of this thread which you had responded to — so you’ll have two things to look at now. :wink:

  • Michelle Shull
    • DEV MAN’s Apprentice

    Heya, Anton!

    Add this to a custom CSS file:

    .dashicons-admin-media:before {

    content: “f306”;

    }

    That will replace the dashicon with another dashicon.

    To replace it with a Font Awesome icon, use the unicode of the icon you want in place of f3o6, you can find the complete list of Font Awesome unicode IDs here: http://fortawesome.github.io/Font-Awesome/cheatsheet/, the change is still made in CSS.

    Do you have a custom CSS plugin? If you’ve got Jetpack, it comes with one; some themes include a CSS editor, or you can get a plugin, like this one: https://wordpress.org/plugins/simple-custom-css/. Or, if you’re using a child theme, you can just add this to the CSS file for your child theme.

    Take care!

  • Anton
    • The Incredible Code Injector

    Sweet, thanks @michelle Shull!

    Add this to a custom CSS file:

    .dashicons-admin-media:before {

    content: “f306”;

    }

    That will replace the dashicon with another dashicon.

    This worked perfectly!!! :slight_smile:

    To replace it with a Font Awesome icon, use the unicode of the icon you want in place of f3o6

    This…did not work so much. Am I supposed to be using everything between the “[ ]” brackets from here? When I try to add it to my custom CSS (I’m using the Simple Custom CSS plugin), it doesn’t seem to “commit” — meaning I copy the code, paste in place of the previous dashicon code, and hit “save”…but it doesn’t actually save the changes.

    Ah well, it’s not the end of the world. There are Font Awesome icons used elsewhere, so was hoping for consistency throughout. But I can live with the dashicon if that’s the only way. (Unless I’m doing something wrong…?)

  • Michelle Shull
    • DEV MAN’s Apprentice

    Heya!

    Glad the dashicon worked, it looks great, too, I was playing with it for your other thread. :slight_smile:

    For the Font Awesome Icon, it’s just the unicode, which looks a lot like the dashicon codes. If you can point me to the one you want, I can find the exact bit you need. :slight_smile:

    Take care!

  • Anton
    • The Incredible Code Injector

    @michelle Shull –

    For the Font Awesome Icon, it’s just the unicode, which looks a lot like the dashicon codes. If you can point me to the one you want, I can find the exact bit you need. :slight_smile:

    Just the regular camera one (“fa-camera” is the CSS class name). I like it a little bit better than the dashicon one, and again…consistency with the rest of the site!

    If you can make the FA icon work….GREAT!! If not…then, at least we tried. :slight_smile:

    Go to Appearance > Custom CSS and you’ll find the code you gave me at the very bottom.

  • Michelle Shull
    • DEV MAN’s Apprentice

    Got it!

    We needed to declare the font-family as FontAwesome, and I gave you the wrong hint with unicode, so sorry there. This ended up making the magic happen:

    .dashicons-admin-media:before {
    content: "f030";
    font-family: FontAwesome;
    }

    Woohoo! On to your next question in my queue, and you should be all set. :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.