ProfessionalWiki / FontAwesome

Allows to insert Font Awesome Free icons in page
https://www.mediawiki.org/wiki/Extension:FontAwesome
GNU General Public License v3.0
4 stars 2 forks source link

Colors and fontsíze #6

Open gtbu opened 4 years ago

gtbu commented 4 years ago

At the moment i the icons are black. Is it possible to colorize them and adjust the size as with the ckeditor-FA-plugins . At the moment i prefer to load the Fa-all.css from the web which allows that.

s7eph4n commented 4 years ago

This extension just loads the necessary files without any customization.

However, you can easily modify the styles by e.g. adding a rule to MediaWiki:Common.css. I did not try it, but something like this should work:

.fa,
.fas,
.far,
.fal,
.fad,
.fab {
  color: red;
}
gtbu commented 4 years ago

As You may guess. i 'd like to adjust color and size and rotation etc manually for every single icon in the text - just as with the ( in Mediawiki not available - ckeditor-FA5-Plugins. {{#far:...}} needs a parameter extension for that

s7eph4n commented 4 years ago

I don't know these plugins. But a pull request is always welcome. Please be cautious with the implementation and make sure to properly escape any user inputs.

resuni commented 4 years ago

As You may guess. i 'd like to adjust color and size and rotation etc manually for every single icon in the text - just as with the ( in Mediawiki not available - ckeditor-FA5-Plugins. {{#far:...}} needs a parameter extension for that

I'm using HTML to accomplish this:

<span style="color:goldenrod; font-weight:bold;"><span class="far" style="font-size:9em;">{{#far:sticky-note}}</span><br />Notes</span>

It would be nice if the extension had a feature to change size, as it would look way cleaner, but this works.

WouterRademaker commented 1 year ago

Some additional classes have been implemented. This gives the same result as your example: <span style="color:goldenrod; font-weight:bold;">{{#far:sticky-note fa-9x}}<br />Notes</span> And if you add a rule for the class "goldenrod" then you could write: {{#far:sticky-note fa-9x goldenrod}}<br /><span class="goldenrod">Notes</span>