Font Awesome Icons Not Showing

#23555
  • Resolved Optimize
    Rank Math free

    Hello! I have been trying to make the font-awesome work but the icons are not coming. They are coming as square error icons.

    Screenshot:

    Please help. Thanks 🙂

Viewing 15 replies - 1 through 15 (of 28 total)
  • Hello,

    Thank you for contacting Rank Math and sorry for any inconvenience that might have been caused due to that.

    You have some custom CSS code on your theme/one of your installed plugins that is overriding the Font Awesome font with the following:

    [class*=" fa-"] {
        font-family: 'icomoon'!important;
    }

    Removing this code seems to fix the problem. Please try to isolate the plugin or custom theme code that is adding this style and comment it out to fix this.

    Looking forward to helping you. Thank you.

    ​​​​​​​

    Okay, Thanks. That has fixed the issue.

    Review Box is kind of ugly. Is there any way I could make it look more awesome? (I don’t want to use WP Review).

    I mean, just seeing at this screenshot. You can tell how ugly it looks.

    Please advice.

    Hello,

    Thank you for contacting Rank Math today.

    I am glad that the first problem is resolved. I can suggest that you address the styling problem by targeting the classes on the review box with some custom CSS styles on your theme. For example the container possesses the class name “rank-math-rich-snippet-wrapper” and you can add some custom styles for this.
    Please use your browser’s inspection tool to identify the selectors.

    Looking forward to helping you. Thank you.

    ​​​​​​

    How can I remove the Image and rather let the Schema take the Featured Image?

    Since, it makes no sense to have the same image two times in the single post.

    But it should be okay for the google and their Terms.

    Thanks.

    Hello,

    Thanks for the follow up.

    You can add the following CSS code to the additional CSS section of your theme to remove this image:

    #rank-math-rich-snippet-wrapper .rank-math-review-image{
    display:none;
    }
    

    For additional customization of this HTML, you will need to pass a string containing some custom HTML to the following filter:

    /**
     * Filter to change review display location
     *
     * @param string $html.
     */
    add_filter( 'rank_math/review/html', function( $html ) {
    	return $html;
    });

    I hope this info helps. Thank you.

    Hi, Thanks.

    1. I have done the CSS Part. It has hide the image. But if you could explain me, What is that PHP Code is doing?

    2. How to remove Featured Image Code HTML? (Because CSS is only hiding it but HTML is still there)

    3. How can I show the data of the field which I have entered in the Schema?

    I want to show things like: Currency, Price, Brand, Product Title (already coming), Product Description (already coming)?

    So that I can then use the CSS to make a box of my own?

    4. How to change “Editor’s Rating” to something else?

    Thanks.

    • This reply was modified 4 years, 4 months ago by Optimize.
    • This reply was modified 4 years, 4 months ago by Optimize.

    Hello,

    Thank you for the follow up.

    It is not possible to remove the HTML, you can only replace with your own custom HTML and logic to replace the values and add the custom ones.

    I can suggest that you take a look at class-snippet-shortcode.php file on this path ..\wp-content\plugins\seo-by-rank-math\includes\modules\rich-snippet to see how Rank Math generates the shortcode HTML.

    Looking forward to helping you. Thank you.

    ​​​​​​

    Okay. I am checking meanwhile if you could tell me. What is this code about which you have mentioned here.

    add_filter( 'rank_math/review/html', function( $html ) {
    	return $html;
    });

    Waiting for your reply!

    Okay. I am checking meanwhile if you could tell me. What is this code about which you have mentioned here.

    add_filter( 'rank_math/review/html', function( $html ) {
    	return $html;
    });

    Hello,

    Thank you for contacting Rank Math today and sorry for not responding sooner.

    You can save your custom HTML markup in a variable and use this instead when displaying the review data on the frontend as shown in this example:

    
    add_filter( 'rank_math/review/html', function( $html ) {
            ob_start();
            ?>
            <div>My custom HTML to display review here</div>
            <div>echo my variables here</div>
            <?php
            $html = ob_get_clean();
    	return $html;
    });
    

    Looking forward to helping you. Thank you.

    ​​​​​​

    Hello, I have added the below mentioned code in my theme files’ functions.php

    But, I am seeing no change at all.

    Please check the Sensitive Data URL

    Waiting for Reply! I’m unsure why my ticket is getting ignored. It is the second time on the same thread.

    Hello, I have added the below mentioned code in my theme files’ functions.php

    But, I am seeing no change at all.

    Please check the Sensitive Data URL

    PLEASE CAN YOU REPLY OR I SHOULD UNINSTALL RANK MATH? My work is halted because of this issue.

    Waiting for Reply! I’m unsure why my ticket is getting ignored. It is the second time on the same thread.

    Hello, I have added the below mentioned code in my theme files’ functions.php

    But, I am seeing no change at all.

    Please check the Sensitive Data URL

    Am I getting intentionally ignored?

    Hello,

    Really sorry for the delay in the reply looks like we missed your ticket.

    That code is just an example to show how you can utilize Rank Math’s filter, and it will need some PHP coding knowledge to create your own custom review box.

    Instead of this, I would recommend using custom CSS to improve styling:

    #rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-review-star {
        margin-left: 5px;
        margin-top: 4px;
    }

    It will make it like this https://i.rankmath.com/H6QzLT, if you want to hide the title, please let us know, will provide custom CSS to hide it.

    Looking forward to helping you.

    Thank you.

    • This reply was modified 4 years, 4 months ago by Rank Math.

    Hello,

    Since we did not hear back from you for 15 days, we are assuming that you found the solution. We are closing this support ticket.

    If you still need assistance or any other help, please feel free to open a new support ticket, and we will be more than happy to assist.

    Thank you.

Viewing 15 replies - 1 through 15 (of 28 total)

The ticket ‘Font Awesome Icons Not Showing’ is closed to new replies.