We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 28173
    • 409 Posts
    Hi,

    I'm looking for a way to have a easy graphical way to select FontAwesome icon from a TVs field.
    I made research, but I don't really found efficient solution to do this.
    I have read this old blog post : https://sepiariver.ca/blog/modx-web/modx-quick-tip-font-awesome-input-options/
    But the last edit mention an issue but for ContentBlock only.
    Mark implement a kind of solution in his Quickstart Buttons extension.

    But nothing available as Revo Addons sad

    Do you know how to implement it on any TVs input ?
      • 3749
      • 24,544 Posts
      I wonder if you could use this TinyMCE Plugin with a Richtext TV. I expect that TinyMCEWrapper would be your best bet for integrating it.
        Did I help you? Buy me a beer
        Get my Book: MODX:The Official Guide
        MODX info for everyone: http://bobsguides.com/modx.html
        My MODX Extras
        Bob's Guides is now hosted at A2 MODX Hosting
      • SuperBoxSelect & SuperBoxSelectFontAwesome are available in the repository.
          • 17301
          • 932 Posts
          ^ Sounds like a better solution.

          Alternatively though, create a listbox TV with this input option value:
          @CHUNK FontAwesome


          Create a chunk called FontAwesome with this snippet called inside:
          [[FontAwesome]]


          Create a snippet called FontAwesome:

          <?php
          // source file
          $cssUrl = $modx->getOption('cssUrl', $scriptProperties, 'https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
          // scan options
          $regexPrefix = $modx->getOption('regexPrefix', $scriptProperties, 'fa-');
          // label text output options 
          $mode = $modx->getOption('mode', $scriptProperties, 'tv'); // can be 'tv' or 'cb'
          $titleCaseLabels = $modx->getOption('titleCaseLabels', $scriptProperties, 1);
          $operator = $modx->getOption('operator', $scriptProperties, '');
          if (empty($operator)) {
              $operator = ($mode === 'cb') ? '=' : '==';
          }
          // value text output options
          $outputPrefix = $modx->getOption('classPrefix', $scriptProperties, 'fa-');
          // list output options
          $separator = $modx->getOption('separator', $scriptProperties, '');
          if (empty($separator)) {
              $separator = ($mode === 'cb') ? "\n" : '||';
          }
          $excludeClasses = array_filter(array_map('trim', explode(',', $modx->getOption('excludeClasses', $scriptProperties, 'ul,li'))));
          // check cache
          $cacheKey = $modx->getOption('cacheKey', $scriptProperties, 'fontawesomecsssource');
          $provider = $modx->cacheManager->getCacheProvider('default');
          $css = $provider->get($cacheKey);
          if (!$css) {
              // get source file
              $css = file_get_contents($cssUrl);
              if ($css) {
                  $provider->set($cacheKey, $css, 0);
              } else {
                  $modx->log(modX::LOG_LEVEL_ERROR, '[fontAwesomeInputOptions] could not get css source!');
                  return '';
              }
          }
          // output
          $output = array();
          $regex = "/\." . $regexPrefix . "([\w-]*)/";
          if (preg_match_all($regex, $css, $matches)) {
              
              $icons = array_diff($matches[1], $excludeClasses);
              foreach($icons as $icon) {
                  
                  $label = ($titleCaseLabels) ? ucwords(str_replace('-', ' ', $icon)) : $icon;
                  $output[] = $label . $operator . $outputPrefix . $icon;
              }
          }
          return implode($separator, $output);
          
            ■ email: [email protected] | ■ website: https://alienbuild.uk

            The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.
            • 28173
            • 409 Posts
            @LK : your solution is nearly perfect : I have the icons list but without the graphics, only the name of the icons.
            Is it possible to get the icons view with your solution ?

            @Jako : I tryied your soluttion too but something goes wrong : the list was empty. I have to dig a little bit.

            @Bob : I wonder if using TinyMCE is not a too much solution in my case... But thanks for proposal, I will try it if the other proposed solutions doesn't works smiley [ed. note: Spheerys last edited this post 5 years, 10 months ago.]
              • 17301
              • 932 Posts
              It should be possible, at least for some of the older icons as the MODX manager does use an outdated version of FontAwesome. Unfortunately I don't have that code at hand though to display them...usually I'll just include a link to the cheatsheet in the caption of the TV.

                ■ email: [email protected] | ■ website: https://alienbuild.uk

                The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.
                • 28173
                • 409 Posts
                I finally use with success the @Jako solution with some adjustment !

                Thanks to all for your answers smiley