How to change the feed icon ?

[Claude]

Hello,

How to change the mini RSS icon (rss-mini.png or feed.png) contained in the ... public / style_images / master directory?

Is it one or the other RSS, rss-mini or feed icon?

If I have to change it with a new icon, do I have to respect the image size, in pixels, but which one?

Thank you in advance,

Regards,

Claude

[bfarber]

Are you still using 3.x I'm assuming based on the image path you supplied?

[Claude]

Hello bfarber,

No, I am using the latest version, Invision Community 4.4.10. My control panel at Hostinger is a cPanel (https://www.prenommer.com).

thank you,

Claude

[Claude]

Hello,

Does the RSS icon have a physical location in the site files?

I still do not see what could be the CSS which declares the icon!

Thank you in advance,

Regards,

Claude

[opentype]

19 minutes ago, Claude said:

Does the RSS icon have a physical location in the site files?

No. It’s not an image at all. It’s from the Font Awesome webfont and it’s called from the theme templates as:

<i class="fa fa-rss-square"></i>

 

[Claude]

Hello opentype

Ah that's why I can't do it, I want to replace this font with my feed image, in black and more stylized.

Can I replace this piece of code <i class = "fa fa-rss-square"> </i> with a physical address, for example, https://example.com/rss-square.png?

Thank you in advance,

Regards,

Claude

 

rssMenu

{{if \count( \IPS\Output::i()->rssFeeds )}}
	<a href='#' id='elRSS' class='ipsPos_right ipsType_large' title='{lang="available_rss"}' data-ipsTooltip data-ipsMenu data-ipsMenu-above><i class='fa fa-rss-square'></i></a>
	<ul id='elRSS_menu' class='ipsMenu ipsMenu_auto ipsHide'>
		{{foreach \IPS\Output::i()->rssFeeds as $title => $url}}
			<li class='ipsMenu_item'><a title="{lang="$title"}" href="{$url}">{lang="$title"}</a></li>
		{{endforeach}}
	</ul>
{{endif}}

 

Edited May 29, 2020 by Claude

[bfarber]

Yes, you could do that.

[Claude]

Good evening Bfarber,

I may have a solution to replace the FA icons with images!

Usually to add an image, we use the tag
<img src = "mon_image.jpg" alt = "mon_image" title = "mon_image" />
Since we are using the <i> tags for Font Awesome, displaying an image will not use the <img> tag, but we will use the FontAwesome code with the image in the background.

Replace some FA icons with a classic image.

For modification, only CSS modifications are required. We will take the case of the .fa-remove icon which displays the following cross x.
The .fa class declares the font, since we will use a background, there is no need to modify it.
The .fa-remove: before class declares the character you want to use .fa-remove: before {content: "/ f00d"; }, it is necessary to cancel it so as not to display the FA icon.
Since we do not want to replace all the icons, it is important to target the modification.

... To be continued,

Regards,

Claude

[Claude]

Hello everybody,

The .fa-remove: before class declares the character you want to use .fa-rss-square: before {content: "\ f143"; }, it is necessary to cancel it so as not to display the FA icon.

See the two screenshots.

It is better to comment on the line (in rssMenu) that we want to cancel.

{{if \count( \IPS\Output::i()->rssFeeds )}}
	<!-- <a href='#' id='elRSS' class='ipsPos_right ipsType_large' title='{lang="available_rss"}' data-ipsTooltip data-ipsMenu data-ipsMenu-above><i class='fa fa-rss-square'></i></a> -->
	<a href='#' id='elRSS' class='ipsPos_right ipsType_large' title='{lang="available_rss"}' data-ipsTooltip data-ipsMenu data-ipsMenu-above></a>	
<ul id='elRSS_menu' class='ipsMenu ipsMenu_auto ipsHide'>
		{{foreach \IPS\Output::i()->rssFeeds as $title => $url}}
			<li class='ipsMenu_item'><a title="{lang="$title"}" href="{$url}">{lang="$title"}</a></li>
		{{endforeach}}
	</ul>
{{endif}}

See you soon,

Claude

Edited May 30, 2020 by Claude