Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
By Mojtaba Reyhani on
I would like to replace the search submit button with a Font Awesome character like the Magnifier (Search Icon) character, and put Search the site inside the search box.
How can I achieve this?
http://i.imgur.com/qyhILDw.png
Comments
try
Hi Mojtaba Reyhani,
Try hook_form_alter.
https://gist.github.com/jasonrwasser/b74dfa35fed74e4f6daa
Hope this will work.
@ Brijesh_Parmar
Thanks so much, But how to add this code to drupal 8 theme.
@
https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Form!form.api.php...
@ Brijesh_Parmar
thanks so much, but how to add this code to drupal 8 theme.
How to specify under a
How to specify under a particular div? Because I have the two same form ID on the front page.
Solution
Instructions for Drupal 8 / FontAwesome 5
Create a YOUR_THEME_NAME_HERE.THEME file and place it in your themes directory (ie. your_site_name/themes/your_theme_name)
Paste this into the file, it is PHP code to find the Search Block and change the value to the UNICODE for the FontAwesome icon. You can find other characters at this link https://fontawesome.com/cheatsheet.
Open the CSS file of your theme (ie. your_site_name/themes/your_theme_name/css/styles.css) and then paste this in which will change all input submit text to FontAwesome. Not sure if this will work if you also want to add text in the input button though for just an icon it is fine.
Make sure you import FontAwesome, add this at the top of the CSS file. Font Awesome 4 has different code (ie. font-family: FontAwesome;)
then add this in the CSS
FLUSH ALL CACHES AND IT SHOULD WORK FINE
Add Google Font Effects
If you are using Google Web Fonts as well you can add also add effects to the icon (see more here https://developers.google.com/fonts/docs/getting_started#enabling_font_e...). You need to import a Google Web Font including the effect(s) you would like to use first in the CSS so it will be
Then go back to your .THEME file and add the class for the 3D Float Effect so the code will now add a class to the input. There are different effects available. So just choose the effect you like, change the CSS for the font import and the change the value FONT-EFFECT-3D-FLOAT int the code below to font-effect-WHATEVER_EFFECT_HERE. Note effects are still in Beta and don't work in all browsers so read here before you try it https://developers.google.com/fonts/docs/getting_started#enabling_font_e...
For Drupal 8 / FontAwesome 5
For Drupal 8 / FontAwesome 5
If you have the fontawesome module already installed you can add to your
THEMENAME.theme
fileWith Drupal 9.5 / Fontawesome 6 tip is not working for me
Hi, as the title says, I tried your snippet with no luck
removes the existing value, but the value remains empty.