Drupal icon library11/10/2023 The sub-module renders icons via a filter on a text format. Let’s now learn how to add them directly into content.įor this you’ll need the “Icon API: Filter” sub-module, make sure it’s enabled. In the last section we added icons to the main menu. If you go to the homepage you should see a home icon next to the Home link. All of them are self-explanatory, leave them in their default state and click on Save. When you select an icon, extra options will appear below. Seeing that we’re editing the Home link, let’s add a home icon. You should see an Icon field-set.įrom here you select and configure the icon.ģ. Edit the Home menu item and scroll to the bottom. Go to Structure, Menus and click on “list links” in the “Main menu” row.Ģ. The most common place for icons is in a menu so let’s add some to the main menu.ġ. Now that we’ve got Icon API and “Font Awesome” setup, let’s display some actual icons in Drupal. If you click on “View Icons” you should see all the icons. But most importantly you can see “Font Awesome” which means it’s been setup properly. Lullacons is a free icon pack from Lullabot which comes with Icon API. Here we have two bundles available: “Font Awesome” and “Lullacons: Pack 1”. Login as the administrator and go to Configuration and click on the Icons link in the Media section.įrom this page you can see all the available icon bundles and you can enable or disable them. To test and make sure the module has been setup. Now that we have Font Awesome installed, go download Icon API, then enable “Icon API: Menu” and “Icon API: Filter” sub-module. Make sure the path to the CSS directory is /sites/all/libraries/fontawesome/css. The module has a Drush command to download Font Awesome, unfortunately this didn’t work.ĭownload v4.2.0 and extract the zip into your libraries directory. However, this didn’t work for me so I had to manually download the library and add it to the libraries directory. The module attempts to download the Font Awesome library when you enable it. Go download Font Awesome and Libraries API and install both modules. To display icons we’ll need to install an icon bundle so before we jump in, let’s install the Font Awesome module. Icon API doesn’t ship actual icons, as the name suggests, it just an API. We’ll do this using the Font Awesome icon bundle. In this tutorial, we’ll configure Icon API to allow an editor to add icons to menus and directly into content. For example, if you want to add icons to menus then install the icon_menu module. The module offers integration with a suite of sub-modules. The Icon API module integrates common icon bundles like Font Awesome, Bootstrap and more within Drupal. What if an editor wants to choose which icon is displayed in a menu? If you’ve added them to the menu manually via CSS then the editor won’t have the ability to change the icon in the future. Once your designer has chosen a font library like Font Awesome, or made their own, what is the best way of displaying them in Drupal? The quick and simple way is to get the designer to style them using CSS but this is not flexible. It’s all about choosing the right type of icons to match the design. Of course, you can’t just slap them on and expect a site to look brilliant. Good use of icons on a website can really lift its overall design.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |