Xiodrade Xiodrade - 2 months ago 6x
PHP Question

Adding an image to replace FA Icon in PHP

I am using the wordpress theme Blackfyre, so all the CSS and HTML is already done. I am trying to directly alter the php coding that contains the header and footer.
I have been sucessful in changing the FA Icon to something more reasonable, but would I be able to change it to an img instead? FA currently does not have a Discord icon, and I would like to add my own by using an img.

<div id="main_wrapper">
<div class="above-nav container">
<div class="social-top">
<?php if ( of_get_option('dribbble') ) { ?> <a class="dribbble" target="_blank" href="<?php echo esc_url(of_get_option('dribbble_link')); ?>"><i class="fa fa-microphone"></i> <i class="fa fa-headphones"></i> </a><?php } ?>
<?php if ( of_get_option('youtube') ) { ?> <a class="youtube" target="_blank" href="<?php echo esc_url(of_get_option('youtube_link')); ?>"><i class="fa fa-youtube"></i> </a><?php } ?>

<div class="clear"></div>

I am trying to replace

<i class="fa fa-microphone"></i> <i class="fa fa-headphones"></i>

with the img icon link. Any assistance would be appreciated.

It currently looks like the below, but I want to replace the headphones/mic with a discord icon img.



Just taking a guess here, since you didn't post your CSS. This has worked in the past for me, though.

Get rid of "fa fa-headphones".

<i class="fa fa-microphone"></i>

Remove the "fa-microphone" to lose the icon, but keep the fa layout.

<i class="fa"></i>

Insert your image...

<i class="fa"><img src="yourimage.png"></i>

Style as needed. This can be done either in your CSS file, or inline. For example...

<i class="fa" style="height: 15px"><img src="yourimage.png"></i>