How to replace dropdown-toggle icon with another default icon in Bootstrap ?
Bootstrap provides the option of adding a dropdown to our websites. The default icon on the dropdown button is the ‘downward solid arrow’ logo. Even though it serves its purpose, most of the modern-day websites nowadays use Bootstrap. Therefore, the icon might look very generic to the visitor.
However, it is possible to change the default Bootstrap icon to the icon of your choice. You can also make that icon toggleable, below steps will proceed to the solution.
- Step 1: Go to an external icon website like Font Awesome. Embed its CDN link inside the <head> tag of the web-page.
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
- Step 2: Change the CSS of the dropdown-toggle to display:none. This will disappear the solid dropdown logo from the button. However, ‘!important’ must be added as well in order to see the changes on the webpage.
display: none !important;
- Step 3: After applying the CSS, copy the embed code of the icon that you want to display on the webpage from the external icon website and paste it inside the button tag. Like in this example, we are using the icon of ‘plus’ sign.
- Step 4: The new icon will start getting displayed on the webpage.
Note: Below program code’s dropdown icon is also toggleable by adding a single line of jQuery code with one click function on the icon.
Program: This example changing the default icon of Bootstrap dropdown icon.