Customize theme

Colors
Primary
Success
Warning
Danger
Info
Direction
RTL

Change text direction

To switch the text direction of your webpage from LTR to RTL, please consult the detailed instructions provided in the relevant section of our documentation.
Border width, px
Rounding, rem
Back to settings

To apply the provided styles to your webpage, enclose them within a <style> tag and insert this tag into the <head> section of your HTML document after the following link to the main stylesheet:
<link href="assets/css/theme.min.css">


          

        

      


      
      

        
        
      

    



    
    

      

        
        
          
            
          
          Finder
          v2.0.0
        
        
        

          
          
    
            
  • 
              
            
    • 
            
  • 
              
            
    • 
            
  • 
              
            
    • 
          

        

        
        
          
          Buy now
        
      

    



    
    

      


        
        


        
        


          
          

            Getting started
            
Icon font

          



          
          

            
This article explains how to use, add or remove icons from the icon font in your project.



            
            

              
Using icons

              
Icon fonts are commonly referenced in the <head> section of HTML documents to ensure they are preloaded correctly and styled as intended.

              
Referencing icon Font in HTML

              
To include the icon font in your HTML files, insert the following lines in the <head> section:

              

                
                
<!-- Font icons -->
<link rel="preload" href="assets/icons/finder-icons.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="assets/icons/finder-icons.min.css">

              

              
Applying icons in your HTML code

              
Icons can be applied within your HTML by using specific classes related to the icon's SVG file name. Here's a sample snippet on how to include an icon:

              

                
                
<i class="fi-settings"></i>

              

            



            
            

              
Adding new icons

              
To expand your icon font library by adding new icons, follow these steps:

              
    
                
  1. 
                  Select the .svg icon: Choose the .svg icon you wish to add to the font library.
                
    2. 
                
  2. 
                  Format the icon: Ensure the icon is properly formatted. It should be placed within a 24x24px grid, with all strokes outlined and shapes unified. Tools like Adobe Illustrator or other vector graphics software are suitable for this task.
                
    3. 
                
  3. 
                  Save the icon: Store the new icon in the src/icons folder. Note, the output icon's CSS class will correspond to the SVG file name.
                
    4. 
                
  4. 
                  Generate the icon font: Execute the npm run icon-font command. This command runs a script that creates the finder-icons.woff2 font file and generates the corresponding finder-icons.min.css file from the collection of .svg icons located in the src/icons directory.
                
    5. 
                
  5. 
                  Optional configuration changes: If you wish to change the output icon font name, modify the config.icons.fontName property in the build/config.js file. To change the prefix of the icon CSS class (default is "ci"), adjust the config.icons.cssPrefix property in the same config file. Ensure to update all relevant references in your HTML documents if any names are changed.
                
    6. 
              

            



            
            

              
Removing icons

              
To remove icons from your project:

              
    
                
  1. 
                  Delete the icon(s): Remove the target .svg icon(s) from the src/icons folder.
                
    2. 
                
  2. 
                  Regenerate the icon font: Run the npm run icon-font command to update the icon font. This removes the deleted icons from the compiled font and the CSS file.
                
    3. 
              

              
By following these steps, you can effectively manage the icons within your project, ensuring that your web application has a tailored and optimized set of icons at your disposal.

            

          

        

      

    



    
    

      
        Top
        
        
        
          
        
      
      
        Customize