Skip to main content

WP File Download: Icons builder

In order to access to Icons Sets and Single file block design, please go in menu WP File Download > Icons Builder

 

icons-builder-menu

 

1. WP File Download icon builder

You can apply the SVG or PNG for file formats on your whole site by enabling the Set as the default option on the right corner of each tab.

 

set-as-default-icon

 

The SVG icon builder

To access Set SVG, go in WP File Download > Icons Builder > Set SVG tab. From here, you can apply an icon style for all others, delete the override icon and the most important feature is Edit icon button.

 

svg-dashboard

 

After clicking on Edit icon button of any icon, it will move to the customization page.

Icon: Change the icon inside the icon

  • Icon color
  • Icon size
  • Symbol selection

 

set-svg-icon

 

Extension name: Set the style of the extension name

  • Extension type
  • Font family
  • Font size
  • Text color

 

set-svg-name

 

Frame setting: This is shape around the icon and extension name

  • Shape selection
  • Frame color
  • Size Thickness

 

set-svg-frame

 

Wrapper: Content of the icon

  • Border
    • Border radius
    • Border size
    • Border color
  • Background
    • Background color
  • Shadow
    • Vertical position
    • Horizontal position
    • Blur radius 
    • Spread radius
    • Shadow color

 

set-svg-wrapper

 

Finally, remember to click on Save button beside the preview icon at the header. 

 

set-svg-save

 

Moreover, when you want to back to the default icons set or reset all your customization, click on the "Reset to original set" button at "Reset to default" section.

 

reset-to-default-svg

 

The PNG set and icon override

Similarly, to access to Set PNG, go in WP File Download > Icons Builder > Set PNG tab. At this tab, you can upload your own icons corresponding to file types.

 

upload-png-set

 

And you can set the represent icon for the unknown files.

 

upload-file-unknown

 

2. Single file block design

In order to access Single file, please go to WP File Download > Icons Builder > Single file. This feature includes two columns: preview block and custom CSS area below on the left, and the main part is block settings on the right. 

 

single-file-dashboard

 

All elements in the single file block can be hidden/visible by clicking on the toggle button on each. Below are what you can adjust:

Icon configuration

  • Margin: top, right, bottom, left.
  • Icon size
  • Select your icon set
  • Link on icon

File title

  • Margin: top, right, bottom, left.
  • Pading: top, right, bottom, left.
  • Font size
  • Wrapper tag

 

icon-title-option

 

File description

  • Margin: top, right, bottom, left.
  • Pading: top, right, bottom, left.
  • Font size

File information

  • File size, File created date, File update File download hit, File version: visible/hidden
  • Font size
  • Margin: top, right, bottom, left.
  • Pading: top, right, bottom, left.

 

file-infor-option

 

Download button

  • Margin: top, right, bottom, left
  • Pading: top, right, bottom, left
  • Button width
  • Border radius
  • Font size
  • Border size
  • Box shadow: x, y, blur and spread
  • Color for box-shadow
  • Border color

 

download-button-option

 

  • Normal: 
    • Font color
    • Button color type: 
      • Solid: Button background color
      • Gradient: Button gradient start/end
  • Hover:
    • Hover font color
    • Hover background type:
      • Solid: Hover background color
      • Gradient: Hover gradient start/end
  • Download icon
  • Icon color
  • Icon size
  • Icon position
  • Icon spacing

 

download-button-option-2

 

Preview button

  • Margin: top, right, bottom, left
  • Pading: top, right, bottom, left
  • Button width
  • Border radius
  • Font size
  • Border size
  • Box shadow: x, y, blur and spread
  • Color for box-shadow
  • Border color

 

preview-button-option-1

 

  • Normal: 
    • Font color
    • Button color type: 
      • Solid: Button background color
      • Gradient: Button gradient start/end
  • Hover: 
    • Hover font color
    • Hoever background type
      • Solid: Hover background color
      • Gradient: Hover gradient start/end
  • Preview icon
  • Icon color
  • Icon size
  • Icon position
  • Icon spacing

 

preview-button-option-2

 

Finally, do not forget to click on Save settings button.