Extend Emoji icon pack and Custom SVG icon pack support

[gcushen]

Feature Request

Extend Emoji icon pack and Custom SVG icon pack support from Featurette widget to all other places where icon packs can be used, such as page button links.

See #1149
See #1692

Todo

• refactor the icon logic from Featurette widget into a function
• update all icon instances to call function

[rodrigoalcarazdelaosa]

Will this make it to v4.9? Really looking forward to it! Thanks!

[rodrigoalcarazdelaosa]

I will leave here this comment (feature request) so as not to open another issue.

Feature Request

Is your feature request related to a problem? Please describe.
Current built-in support for asides (alerts) is only available for notes and warnings, whose styles can be customized with CSS.

Describe the solution you'd like
It'd be great if we could use custom icons (all types) in asides (alerts) without having to customize our CSS.

Describe alternatives you've considered
Right now one can create another type of aside (alert) by writing just some lines in assets/scss/custom.scss. Let's say we want an example alert, with a lightbulb icon from Font Awesome and some green colors:

div.alert-example > div:first-child::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #4c5f26;
  content: '\f0eb';
}

.alert-example {
  color: #111111;
  background-color: #ccddaa;
  border-color: #4c5f26;
}

Then we would write:

{{% alert example %}}
This is an example text.
{{% /alert %}}

It'd be better if we could specify the icon we want, actually the basic styling such as colors for example, without having to write those CSS lines for each new aside (alert) we want to have.

Additional context
The code above gives this:

[rodrigoalcarazdelaosa]

Related to this, Font Awesome 6, to be released in the second half of 2020, will allow us to upload our own icons, and use them just as if they were Font Awesome icons, so I can imagine a future version of Academic where this may not be needed at all.

That will probably be a PRO feature though.

[rodrigoalcarazdelaosa]

If/when this is implemented we could change the sharing icons from Font Awesome to the actual brand logos, from this:

to this (envelope is from Twemoji):

[rodrigoalcarazdelaosa]

How about using this technique to use custom SVGs as if they were emojis? In order to being able to still use normal emojis, we should choose another escape character (not the semicolon :). Will try it 😉

[rodrigoalcarazdelaosa]

@gcushen, relevant project that can help with this.

[gcushen]

Closing as the issue has been open for over a year with no contributions and little-no interest from the community.

PRs are welcome if anyone comes across this and wishes to contribute an improvement.