Markup for font icons instead of images

  • It would be nice to have an empty span after each star image like so:

    https://prntscr.com/hhox7u

    Could you please add it in template?

    Then you can use FontAwesome icons with following CSS:

    
.post-ratings {
	display: inline-block;
	position: relative;
	width: auto;
	opacity: 1;
	font-size: 0;
	color: transparent;
}

.post-ratings > img {
	position: relative;
	z-index: 2;
	opacity: 0;
}

.post-ratings > span {
	position: absolute;
}
.post-ratings > span:after{
	color: #f5bb2c;
	font-size: 16px;
	font-family: 'FontAwesome';
	content: "\f006";
	position: relative;
	left: -1em;
	z-index: 1;
}

.post-ratings > img[src*="rating_on"] + span:after{
	content: "\f005";
}

.post-ratings > img[src*="rating_half"] + span:after{
	content: "\f123";
}

.post-ratings > img[src*="rating_over"] + span:after{
	content: "\f005";
	color: #e23751;
}

    For now we can add these span elements with following JS code:

    
if (typeof(rate_post_success) === 'function') {
	jQuery('.post-ratings').find('img').after('<span/>');
	//override default function - to add span on success rating set
	window.rate_post_success = function (data) {
		jQuery('#post-ratings-' + post_id).html(data);
		if(ratingsL10n.show_loading) {
			jQuery('#post-ratings-' + post_id + '-loading').hide();
		}
		if(ratingsL10n.show_fading) {
			jQuery('#post-ratings-' + post_id).fadeTo('def', 1, function () {
				set_is_being_rated(false);
			});
		} else {
			set_is_being_rated(false);
		}
		jQuery('.post-ratings').find('img').after('<span/>');
	}
}

    Result: https://prntscr.com/hhp10q

    Thank you!

Viewing 15 replies - 1 through 15 (of 15 total)
  • Plugin Author Lester Chan

    (@gamerz)

    I will probably not add this to the core, but rather, I will sticky this, so people who want to use FA can refer to this!

    Hi,

    I like the idea of using fontawesome instead of images.

    But this solution does seem right to me. Why?
    Why do you use font icons?
    1. You want them responsive, scalable and fillable (you got that in your code yes)
    2. You want to reduce server requests by exchanging images for font icons (i don’t see that here)

    So the feature you realy need is a switch that turns of the img tag generation and adds italic tags with font awesome classes to it.
    So everyone who has loaded fontawesome simply activate the feature or simpler for the start something like this:

    add_filter( 'wp_postratings_image_extension', 'custom_rating_image_extension' );
function custom_rating_image_extension() {
    return 'fontawesome';
}

    I think I try making a version for that and on my way fixing the problem of adding click handlers to most popular post widget .I did a quick and dirty solution on my page just deleting the event handlers via jquery:
    https://www.foodcat.de/blog
    But it would be better if they don’t get generated at all there.

    @gamerz If you like it you can merge it into your trunk

    Nooooo! Fontawesome is terrible and using it will add bloat of a whole font versus a small image. WordPress has moved to SVGs added to the footer of the page. If we were to do anything, add a simple star SVG to the footer and refer to it via USE.

    FontAwesome is a dependency we don’t need and so many users are moving away from it. Bootstrap 4 dropped icon fonts. WordPress dropped icon fonts. Lots of free star SVG images to choose.

    Please use SVG if you’re moving from images and want scalable graphics.

    Like it said, it is only for people that already included fontawesome in their page ??

    SVG still is the better option but still you will have more requests if you are using more icons than only that star

    PS: svg should working already, so why are you so mad

    install a plugin like “SVG Support”

    add_filter( 'wp_postratings_image_extension', 'custom_rating_image_extension' );
function custom_rating_image_extension() {
    return 'svg';
}

    and a folder with your svgs to the postrating plugin (like any other costum image)

    But you are right with the overblow, but you can optimize your iconfont to your needs with tools like:
    https://fontello.com/

    • This reply was modified 6 years, 9 months ago by Sandra.
    • This reply was modified 6 years, 9 months ago by Sandra.

    I forgot to say, i optimized my fontawesome file with:
    https://fontforge.github.io/
    https://transfonter.org/

    Then you can realy choose the items you need without losing its flexibility

    Most SVGs in recent wordpress versions are embedded in the page in the footer. There is NO external file call, which Google PageSpeed and others prefer. Fewer dependencies on external resources means faster web sites.

    > “so why are you so mad”
    Not mad. Just hate to see wordpress plugins that depend on external resources to function correctly or assume a certain environment ahead of time. If it’s an option that can be chosen, I’m completely unaffected by it.

    ah so it is not loading every svg with a single call.

    Do you have a documentation how to send svgs to the footer?
    Then i totally agree with you, that this is a way better solution

    but i didn’t start implementing anything with fontawesome yet because i first refactored that function, there may be even better solutions, but i don’t like the same code over and over again, so i fixed it for a better reading for myself:

    $ratings_image = esc_attr( $ratings_image );
    if(is_rtl() && file_exists(WP_PLUGIN_DIR.'/wp-postratings/images/'.$ratings_image.'/rating_start-rtl.'.RATINGS_IMG_EXT)) {
        $ratings_images .= '<img src="'.plugins_url('/wp-postratings/images/'.$ratings_image.'/rating_start-rtl.'.RATINGS_IMG_EXT).'" alt="" class="post-ratings-image" />';
    } elseif(file_exists(WP_PLUGIN_DIR.'/wp-postratings/images/'.$ratings_image.'/rating_start.'.RATINGS_IMG_EXT)) {
        $ratings_images .= '<img src="'.plugins_url('/wp-postratings/images/'.$ratings_image.'/rating_start.'.RATINGS_IMG_EXT).'" alt="" class="post-ratings-image" />';
    }
    if($ratings_custom) {
        for($i=1; $i <= $ratings_max; $i++) {
            if (is_rtl() && file_exists(WP_PLUGIN_DIR.'/wp-postratings/images/'.$ratings_image.'/rating_'.$i.'half-rtl.'.RATINGS_IMG_EXT)) {
                $use_half_rtl = 1;
            } else {
                $use_half_rtl = 0;
            }
            $ratings_text = esc_attr( stripslashes( $ratings_texts[$i-1] ) );
            $ratings_text_js = esc_js( $ratings_text );
            $image_alt = apply_filters( 'wp_postratings_ratings_image_alt', $ratings_text );
            if($i <= $post_rating) {
                $ratings_images .= '<img id="rating_'.$post_id.'_'.$i.'" src="'.plugins_url('/wp-postratings/images/'.$ratings_image.'/rating_'.$i.'_on.'.RATINGS_IMG_EXT).'" alt="'.$image_alt.'" title="'.$image_alt.'" onmouseover="current_rating('.$post_id.', '.$i.', \''.$ratings_text_js.'\');" onmouseout="ratings_off('.$post_rating.', '.$insert_half.', '.$use_half_rtl.');" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" />';
            } elseif($i == $insert_half) {
                if ($use_half_rtl) {
                    $ratings_images .= '<img id="rating_'.$post_id.'_'.$i.'" src="'.plugins_url('/wp-postratings/images/'.$ratings_image.'/rating_'.$i.'_half-rtl.'.RATINGS_IMG_EXT).'" alt="'.$image_alt.'" title="'.$image_alt.'" onmouseover="current_rating('.$post_id.', '.$i.', \''.$ratings_text_js.'\');" onmouseout="ratings_off('.$post_rating.', '.$insert_half.', '.$use_half_rtl.');" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" />';
                } else {
                    $ratings_images .= '<img id="rating_'.$post_id.'_'.$i.'" src="'.plugins_url('/wp-postratings/images/'.$ratings_image.'/rating_'.$i.'_half.'.RATINGS_IMG_EXT).'" alt="'.$image_alt.'" title="'.$image_alt.'" onmouseover="current_rating('.$post_id.', '.$i.', \''.$ratings_text_js.'\');" onmouseout="ratings_off('.$post_rating.', '.$insert_half.', '.$use_half_rtl.');" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" />';
                }
            } else {
                $ratings_images .= '<img id="rating_'.$post_id.'_'.$i.'" src="'.plugins_url('/wp-postratings/images/'.$ratings_image.'/rating_'.$i.'_off.'.RATINGS_IMG_EXT).'" alt="'.$image_alt.'" title="'.$image_alt.'" onmouseover="current_rating('.$post_id.', '.$i.', \''.$ratings_text_js.'\');" onmouseout="ratings_off('.$post_rating.', '.$insert_half.', '.$use_half_rtl.');" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" />';
            }
        }
    } else {
        if (is_rtl() && file_exists(WP_PLUGIN_DIR.'/wp-postratings/images/'.$ratings_image.'/rating_half-rtl.'.RATINGS_IMG_EXT)) {
            $use_half_rtl = 1;
        } else {
            $use_half_rtl = 0;
        }
        for($i=1; $i <= $ratings_max; $i++) {
            $ratings_text = esc_attr( stripslashes( $ratings_texts[$i-1] ) );
            $ratings_text_js = esc_js( $ratings_text );
            $image_alt = apply_filters( 'wp_postratings_ratings_image_alt', $ratings_text );
            if($i <= $post_rating) {
                $ratings_images .= '<img id="rating_'.$post_id.'_'.$i.'" src="'.plugins_url('/wp-postratings/images/'.$ratings_image.'/rating_on.'.RATINGS_IMG_EXT).'" alt="'.$image_alt.'" title="'.$image_alt.'" onmouseover="current_rating('.$post_id.', '.$i.', \''.$ratings_text_js.'\');" onmouseout="ratings_off('.$post_rating.', '.$insert_half.', '.$use_half_rtl.');" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" />';
            } elseif($i == $insert_half) {
                if ($use_half_rtl) {
                    $ratings_images .= '<img id="rating_'.$post_id.'_'.$i.'" src="'.plugins_url('/wp-postratings/images/'.$ratings_image.'/rating_half-rtl.'.RATINGS_IMG_EXT).'" alt="'.$image_alt.'" title="'.$image_alt.'" onmouseover="current_rating('.$post_id.', '.$i.', \''.$ratings_text_js.'\');" onmouseout="ratings_off('.$post_rating.', '.$insert_half.', '.$use_half_rtl.');" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" />';
                } else {
                    $ratings_images .= '<img id="rating_'.$post_id.'_'.$i.'" src="'.plugins_url('/wp-postratings/images/'.$ratings_image.'/rating_half.'.RATINGS_IMG_EXT).'" alt="'.$image_alt.'" title="'.$image_alt.'" onmouseover="current_rating('.$post_id.', '.$i.', \''.$ratings_text_js.'\');" onmouseout="ratings_off('.$post_rating.', '.$insert_half.', '.$use_half_rtl.');" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" />';
                }
            } else {
                $ratings_images .= '<img id="rating_'.$post_id.'_'.$i.'" src="'.plugins_url('/wp-postratings/images/'.$ratings_image.'/rating_off.'.RATINGS_IMG_EXT).'" alt="'.$image_alt.'" title="'.$image_alt.'" onmouseover="current_rating('.$post_id.', '.$i.', \''.$ratings_text_js.'\');" onmouseout="ratings_off('.$post_rating.', '.$insert_half.', '.$use_half_rtl.');" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" />';
            }
        }
    }
    if(is_rtl() && file_exists(WP_PLUGIN_DIR.'/wp-postratings/images/'.$ratings_image.'/rating_end-rtl.'.RATINGS_IMG_EXT)) {
        $ratings_images .= '<img src="'.plugins_url('/wp-postratings/images/'.$ratings_image.'/rating_end-rtl.'.RATINGS_IMG_EXT).'" alt="" class="post-ratings-image" />';
    } elseif(file_exists(WP_PLUGIN_DIR.'/wp-postratings/images/'.$ratings_image.'/rating_end.'.RATINGS_IMG_EXT)) {
        $ratings_images .= '<img src="'.plugins_url('/wp-postratings/images/'.$ratings_image.'/rating_end.'.RATINGS_IMG_EXT).'" alt="" class="post-ratings-image" />';
    }

    after

    $ratings_image = esc_attr( $ratings_image );
		if(is_rtl() && file_exists(WP_PLUGIN_DIR.'/wp-postratings/images/'.$ratings_image.'/rating_start-rtl.'.RATINGS_IMG_EXT)) {
			$ratings_images .= '<img src="'.plugins_url('/wp-postratings/images/'.$ratings_image.'/rating_start-rtl.'.RATINGS_IMG_EXT).'" alt="" class="post-ratings-image" />';
		} elseif(file_exists(WP_PLUGIN_DIR.'/wp-postratings/images/'.$ratings_image.'/rating_start.'.RATINGS_IMG_EXT)) {
			$ratings_images .= '<img src="'.plugins_url('/wp-postratings/images/'.$ratings_image.'/rating_start.'.RATINGS_IMG_EXT).'" alt="" class="post-ratings-image" />';
		}

			for($i=1; $i <= $ratings_max; $i++) {
				
				if (is_rtl() 
					&& (file_exists(WP_PLUGIN_DIR.'/wp-postratings/images/'.$ratings_image.'/rating_'.$i.'_half-rtl.'.RATINGS_IMG_EXT) 
						|| file_exists(WP_PLUGIN_DIR.'/wp-postratings/images/'.$ratings_image.'/rating_half-rtl.'.RATINGS_IMG_EXT))) {
					$use_half_rtl = 1;
				} else {
					$use_half_rtl = 0;
				}
				$ratings_text = esc_attr( stripslashes( $ratings_texts[$i-1] ) );
				$ratings_text_js = esc_js( $ratings_text );
				$image_alt = apply_filters( 'wp_postratings_ratings_image_alt', $ratings_text );
				
				// which img should be displayed
				if($i <= $post_rating) {
					$imgtype = "on";
				} elseif($i == $insert_half) {
					if ($use_half_rtl) {
						$imgtype = "half-rtl";
					} else {
						$imgtype = "half";
					}
				} else {
					$imgtype = "off";
				}
				//different image for every position
				if($ratings_custom) {
					$customfiller = $i.'_';
				}
				$ratings_images .= '<img src="'.plugins_url('/wp-postratings/images/'.$ratings_image.'/rating_'.$customfiller.$imgtype.'.'.RATINGS_IMG_EXT).'" 
										id="rating_'.$post_id.'_'.$i.'"
										alt="'.$image_alt.'" title="'.$image_alt.'" 
										onmouseover="current_rating('.$post_id.', '.$i.', \''.$ratings_text_js.'\');" 
										onmouseout="ratings_off('.$post_rating.', '.$insert_half.', '.$use_half_rtl.');" 
										onclick="rate_post();" onkeypress="rate_post();" 
										style="cursor: pointer; border: 0px;" />';
				
			}
		if(is_rtl() && file_exists(WP_PLUGIN_DIR.'/wp-postratings/images/'.$ratings_image.'/rating_end-rtl.'.RATINGS_IMG_EXT)) {
			$ratings_images .= '<img src="'.plugins_url('/wp-postratings/images/'.$ratings_image.'/rating_end-rtl.'.RATINGS_IMG_EXT).'" alt="" class="post-ratings-image" />';
		} elseif(file_exists(WP_PLUGIN_DIR.'/wp-postratings/images/'.$ratings_image.'/rating_end.'.RATINGS_IMG_EXT)) {
			$ratings_images .= '<img src="'.plugins_url('/wp-postratings/images/'.$ratings_image.'/rating_end.'.RATINGS_IMG_EXT).'" alt="" class="post-ratings-image" />';
		}

    but there are two more functions that need to be optimized

    Have a look at twentyseventeen theme in inc/icon-functions.php
    https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentyseventeen/inc/icon-functions.php for a wonderful example of using SVG. It uses them exclusively, which is why I suggest it’s where this plugin should be going.

    That said, we don’t need to be this complicated, as this is meant to be general. Just before the </body> we can add the SVG icon.

    <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
<defs>
<symbol
id="icon-pause" viewBox="0 0 24 28">
<path
d="M24 3v22c0 0.547-0.453 1-1 1h-8c-0.547 0-1-0.453-1-1v-22c0-0.547 0.453-1 1-1h8c0.547 0 1 0.453 1 1zM10 3v22c0 0.547-0.453 1-1 1h-8c-0.547 0-1-0.453-1-1v-22c0-0.547 0.453-1 1-1h8c0.547 0 1 0.453 1 1z"></path>
</symbol>
</defs>
</svg>

    When you want to use a star, you would then insert the code

    <svg
class="icon icon-pause" aria-hidden="true" role="img"> <use
href="#icon-pause" xlink:href="#icon-pause"></use> </svg>

    Of course we’d need to replace the star with an actual star image. Lots of royalty-free SVG stars out there, or one can be made in minutes in Illustrator.

    This can easily be done with a couple functions.

    somehow it doesn’t like me.

    i added these svgs to the DOM

    <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
                    <defs>
                    <symbol
                    id="postrating-star" viewBox="0 0 24 28">
                    <path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z"/>
                    </symbol>
                    </defs>
        </svg>
        <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
                    <defs>
                    <symbol
                    id="postrating-star-half" viewBox="0 0 24 28">
                    <path d="M1250 957l257-250-356-52-66-10-30-60-159-322v963l59 31 318 168-60-355-12-66zm452-262l-363 354 86 500q5 33-6 51.5t-34 18.5q-17 0-40-12l-449-236-449 236q-23 12-40 12-23 0-34-18.5t-6-51.5l86-500-364-354q-32-32-23-59.5t54-34.5l502-73 225-455q20-41 49-41 28 0 49 41l225 455 502 73q45 7 54 34.5t-24 59.5z"/>
                    </symbol>
                    </defs>
        </svg>
        <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
                    <defs>
                    <symbol
                    id="postrating-star-off" viewBox="0 0 24 28">
                    <path d="M1201 1004l306-297-422-62-189-382-189 382-422 62 306 297-73 421 378-199 377 199zm527-357q0 22-26 48l-363 354 86 500q1 7 1 20 0 50-41 50-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z"/>
                    </symbol>
                    </defs>
        </svg>

    but non of them work as wished,
    can you fix that for me, then i can finish the function.

    You can get the refactored file here:
    https://www.foodcat.de/postratings.rar

    I made a simple test if(true) at a already voted page view so i can check out the svg there, but it won’t work

    In end, i hope it looks like my fontawesome prototype if folked here:
    https://codepen.io/anon/pen/gvjEMP

    I feel that is so much easier to do (maybe because I’m not used to it)

    I finished my fontawesome version.
    Feel free to test and use it.

    https://foodcat.de/wp-postratings-with-fontawesome.rar

    How to install:

    1. Make sure your WordPress has a fontawesome library activated
    2. open your functions.php and add:

    add_filter( 'wp_postratings_image_extension', 'custom_rating_image_extension' );
function custom_rating_image_extension() {
    return 'fontawesome';
}

    3. have fun

    PS: sorry that svg inline is cool but in the end I use fontawesome anyway and this is what i could do easily
    feel free to chance it to a better svg one

    PS: I have it live on my page if you want to see the stars working
    https://www.foodcat.de/rezepte/mozzarella-hackbaellchen-mit-gemuese-bento/

    Does anyone have an idea how to modify this plugin to use a single png sprite and CSS instead of many individual images? I think a single sprite would be much better than what we have while avoiding font-awesome approach.

    @sandra your mod is bugged https://postimg.org/image/vtuvrdp4l/

    The half star is at wrong place after voting.

    @ctrlaltdelete thanks i fixed it ??

    you can add an background with base64 in css of that png image, so its loaded over css only one time, so you need 3 classes full star, half star and empty star.
    and than a div that uses this class instead of an image

    I don’t know how to override what the plugin does, i mean it switches the images on hover, i have to disable that. In my case all images are the same image what changes on hover is the position.

    https://s18.postimg.org/8tk3k9b0p/css-sprite-combined.2.png

    positioning:

    .css-sprite-rating_half
{
background:url('css-sprite-combined.2.png') 0px -0px;
width:14px;height:12px;
}

.css-sprite-rating_half-rtl
{
background:url('css-sprite-combined.2.png') -14px -0px;
width:14px;height:12px;
}

.css-sprite-rating_off
{
background:url('css-sprite-combined.2.png') -28px -0px;
width:14px;height:12px;
}

.css-sprite-rating_on
{
background:url('css-sprite-combined.2.png') -42px -0px;
width:14px;height:12px;
}

.css-sprite-rating_over
{
background:url('css-sprite-combined.2.png') -56px -0px;
width:14px;height:12px;
}

    Too much for me. ??

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Markup for font icons instead of images’ is closed to new replies.