Why use dynamic css classes and not inline styles? Because classes is best practice above inline styling first of all. (.php extension needed for syntax styling, in Drupal this is just 'yourtheme.theme')
#DRUPAL 8 ADD FONT KIT HOW TO#
theme fileĭrupal content managers can now choose a background -and text color, but how to make sure this also works in the frontend?įirst up: preprocess your paragraph in your. Implement THEME_preprocess_paragraph() in your. Avoids 'You are not your user!' stuff.Ībove config results in this for content managers:Īs you can see, it's now very easy to pick a predefined color and even switch on the fly to test out what works: power to the CM! 4. I think this config is useful so content managers can only choose from color defined by for example a style guide and can't use an exotic, 'I like this' color. Enter the default colors for pre-selected color boxes as 6 digit upper case hex.Click on 'Manage Form Display' in your Paragraph Twig template file.Next up, configure the Form Display for the content managers: Configure the 'Form Display' for the color field Provide name, in this case: 'Background Color'.īest practice is to keep the field names somewhat generic so you can easily share it in all other Paragraphs where you want content managers to set background -and text color:ģ.Add the Color Fields to your Paragraph(s). Or a newer version if you're reading this in the future. The module provides a field in which end-users like Drupal content managers can choose a color in a user-friendly way: just choose from a (predefined) color palette.Ĭomposer require 'drupal/color_field:^2.4'
#DRUPAL 8 ADD FONT KIT INSTALL#
It's stable and has a large install base: ~40.000 Drupal sites at the moment. You can find this module here on, it was born in the Drupal 7 era and also has releases for Drupal 8/9. I assume you already have some paragraphs set up with help of the Paragrahps module.
#DRUPAL 8 ADD FONT KIT PROFESSIONAL#
On the link field, require a title, this will be our button text.Īfter our fields are created and configured, we’ll create a Twig template override for the paragraph,, from a copy of I use Paragraphs in almost every Drupal project: it's very flexible, has a professional ecosystem, and content managers love it. Putting it togetherįirst, we’ll create the paragraph type, in this case named CTA Button, and add two fields: a Link field (cta_link) and a List (text) field (cta_icon). For the purposes of this article, the icons on the CTA button will be decorative in nature, so the only thing that needs to be done is to add the aria-hidden attribute to the icon’s HTML. Thankfully, Font Awesome has a great resource on making their icons accessible whether you are using them purely as decoration or as elements with semantic meaning. Simply using icons by copying the basic HTML from Font Awesome will not make your accessibility audit tool of choice happy, nor, more importantly, your users who rely on assistive technologies. A note on accessibilityįont Awesome icons do not meet WCAG accessibility standards out of the box. Once you have that all set, you’re good to go! You can find the icon(s) that fit the use case you have in mind via Font Awesome’s search function.įor the purposes of this example, you’ll also need to add the Paragraphs module to your site via Composer and enable it either via Drush on the CLI or in the Drupal administrative interface. You can manually add the assets or use a package manager like NPM or Yarn to install them as well. Getting the toolbox readyįirst thing’s first, if you don’t already, you’re going to need access to Font Awesome Icons in your project. As a demonstration of the concept, we’ll be creating a CTA button component that includes an icon on the button. This method is extendable and allows site users with the appropriate permissions to add more icon options via site configuration, so a developer is not needed to add new icons in the future. In this article, we’ll be covering how to utilize the Paragraphs module, List (text) fields, and Drupal’s flexible Twig templates on a Drupal 8 site to allow content editors to add Font Awesome icons to components from a defined list. Font Awesome icons are a fun way to add visual appeal and definition to interactive or informational elements on your website.
0 kommentar(er)
