Can you walk through your use case in more detail?

We do use FontAwesome, but it's modified and we don't support "fa". If you have an element render a PHUIIconView instead, that will probably work:

return id(new PHUIIconView())
  ->setIconFont('fa-camera-retro');

The one example that made me thing of this is that we have a wiki doc where the author started to define custom "symbols" using asterisks to highlight some list entries. Using NOTE: and friends wouldn't work as it would break the list layout.

What would be the HTML element and attributes to use to insert a FontAwesome icon into rendered Remarkup using phutil_tag()?

For instance like in here for one of the extensions I wrote to automatically link email addresses:

public function markupInlineEmailBlock($matches) {
  $engine = $this->getEngine();

  $email = $matches[0];
  $attributes = array(
    'href' => "mailto:$email",
    // 'target' => '_blank',
    'rel' => 'noreferrer',
  );
  $source_body = phutil_tag('a', $attributes, $email);

  return $engine->storeText($source_body);
}

You should be able to just do:

$source_body = id(new PHUIIconView())->...

(I think the icons in Remarkup would be nice)

The PHUIIconView stuff is all just css classes, so fa-camera red msr builds a camera, red, with a small margin to the right.

How about {icon camera} / {icon camera color=red} for syntax?

Sounds great!

I wrote a quick extension using this syntax: <icon camera-retro>:

<?php

final class CustomInlineIconRule extends PhabricatorRemarkupCustomInlineRule {

  public function apply($text) {
    return preg_replace_callback(
      '(<icon (.*?)>)s',
      array($this, 'markupInlineIconBlock'),
      $text);
  }

  public function markupInlineIconBlock($matches) {
    $engine = $this->getEngine();

    $text = $matches[1];
    $source_body = id(new PHUIIconView())->setIconFont('fa-'.$text);

    return $engine->storeText($source_body);
  }

}

It's really neat, I can put icons in tables for instance to efficiently indicate something vs having to come up with abbreviations:

I don't know if it's possible but it might be useful to display some sort of fallback icon if the name of the icon is invalid.

Playing with it, it's pretty fun to be able to annotate text with such icons. It would be even better if there was a more concise syntax as the amount of typing for {icon camera} adds friction. Is there any single character that could be used like $camera or %camera (short form) or {icon camera color=red} (long form)?

(I made the default "paw", which is helpful when you just type {icon} or have something misspelled, etc, so it renders something rather than an invalid tag.)

I don't want to support a short form (particularly, $icon) in the upstream since I worry it will hit a lot of false positives with people pasting source code into things, and this feature may not see all that much use. You can conceivably just copy-paste the implementation locally and change what it captures (and the class it extends) if you want to implement $icon. We might support a short form eventually if this sees more usage or we get more demand.

You're right, this is completely reasonable, thanks for the super fast turnaround!

Not trying to be a pain, but should this support large sizes as well to be really complete?
http://fortawesome.github.io/Font-Awesome/examples

These icons are just so nice looking!

For instance: {icon camera size=4x}

We could maaaybe do the size stuff, but I think it will render awkwardly in every context except table cells, and probably not work great there. We also don't have technical support for it right now -- it's not complicated, but we'd have to add sizing just for this use case.

Headers Work

This should work now, yell if you see a .

Thanks @chad great workaround!

Does the remark up reference needs updating to reflect this change? Can we assume the list of available icons matches the one of the fortawesome website?

BTW it would be useful to indicate I the remarkup reference what are the supported color names. I looked for it in the past and could never find them.

D9722 did include a documentation update:

https://secure.phabricator.com/book/phabricator/article/remarkup/#icons

You can check /uiexample/view/PHUIIconExample/ on your install for a list of icons and colors. They should be the same as FA, but that's the authoritative list. Omit "fa-" when using them in {icon ...}.

Got it, thanks!