Manual

The fundamentals of using Slider Revolution.

Adding and Configuring Icon and SVG Layers

Learn how to use the library of thousands of SVG and font based icons that come with Slider Revolution.

Table of Contents

Add New Icon or SVG Layer

To add a new icon or SVG layer [?] Layers are containers for visual, audio or layout items and are added to slides. For example, text, button, image, audio, video, group and row are all types of layers.

Layers are added to slides via the module editor.
go to the Add Layer button in the top toolbar, then click the Icon / SVG button:

This will open a selection dialogue you can browse to choose a graphic to use:

Let’s explore what your options are.

Choosing a Graphic

Slider Revolution comes with thousands of in built icons ready to use. In the left sidebar of the graphic selection box you will see several groupings that will help you narrow down the range:

You can also enter search terms in the field at the top of the box, just to the right of the sidebar:

But before you choose an icon, it may benefit you to learn a little about the two icon types available.

Icon Types: SVGs and Font Icons

The icons included with Slider Revolution come in two types: SVGs and font icons. Let’s learn what they are, and which you should choose.

SVG

SVG stands for Scalable Vector Graphic, and is a type of image that can be scaled as large or small as you like without any quality loss. SVGs can have their fill colors changed and can also have solid or dashed strikes applied to multiple parts of the image.

They are typically quite small in file size, and can potentially be very detailed. It’s also possible to upload your own SVG graphics to use in your modules [?] A module in Slider Revolution acts as a container for slides, which in turn act as containers for layers. Modules are created and edited with the module editor.

A "module" is a single, self contained piece of content. You can think of this as being similar to the way a post or page in regular WordPress is a self contained piece of content.

A module can represent any kind of content Slider Revolution is capable of creating, such as a slider, carousel, hero unit, navigation menu, posts display and so on.

Multiple modules can be combined to form rich content such as complete sites and landing pages.
.

In the graphic selection box sidebar you can click the SVGs link in the sidebar to browse the included icons. You will see a number of categories listed in the sidebar as well, which can help you narrow down your search for the right graphic:

If you have your own SVG images you want to use, click My SVG Library in the sidebar:

Then click the blue Import SVG Files button in the bottom left corner to open a file selection document through which you can add your .svg file:

Once uploaded, your SVG file will appear in the My SVG Library section, ready for insertion into your module:

Font Icon

Font icons utilize a type of file normally meant for generating text – a single file that contains several small images called “glyphs”. In a regular font file each glyph is a letter, but in a font icon file each glyph is an icon instead. Repurposing glyphs in this way provides a handy method of packaging a large number of consistently styled icons all in a single font file.

Even though font icons look like images, the fact they are actually font glyphs means they behave like text. As a result when you set their size and style you do so in the same way as you would text.

This makes them quite good for using inline with actual text, because they can be given the exact same style settings as the text they are sitting next to. For example, placing a font icon inline on a button label:

Font icons can also be infinitely scaled without quality loss. They can have their fill color changed, but cannot be given any stroke styling. They are typically quite simple in design.

Because font icons come as a collection of glyphs in a single font file, no matter how many you actually use, the entire set will be loaded. This makes them efficient if you will be using several icons from the same set, but less so if you are using only a small number.

In the graphic selection box you can click the Font Icons link in the sidebar to browse the included icons. You will see four sets available: “Font Awesome”, “Material Icons”, “Stroke Icon 7” and “Weather”:

Which Type to Choose?

Choose SVG if:

  • You want to be able to set any type of stroke style
  • You want to use your own custom icon graphic
  • You want to use only a small number of icons
  • You want a relatively complex icon graphic

Choose font icons if:

  • You want to use the icons inline with text
  • You want to use several icons from the same set
  • You want relatively simple icon graphics

Now that you know how to decide between icon graphic types, let’s look at how to configure each one.

SVG Style Settings

Keep Original Colors

All SVGs come with their own built in coloring, but this coloring can be overridden within Slider Revolution. You can set whether or not you want to override an SVG’s colors by toggling the Keep Original Colors button, in the SVG panel of the layer’s Style sub-section.

When an SVG from the included library is first added to the canvas it will be set to all white in color, but by toggling the Keep Original Colors button to ON you can show the original colors instead, typically all black:

When a custom SVG you uploaded yourself is first added it will be set to use its own colors by default. In this case, you can toggle the Keep Original Colors button to OFF to apply your own colors instead:

When Keep Original Colors is set to OFF you’ll get a collection of color styling options for your SVG. Let’s taste a look at them now.

SVG Color

The SVG Color option sets the fill color of the SVG. It’s not possible to apply a gradient here, but any flat color is possible:

Stroke Color

The Stroke Color option sets a color for outlines and lines in the graphic, and can be set to any flat color:

Stroke Width

Stroke Width controls the width, in pixels, of outlines and lines in the graphic:

Even though the width is set in pixel values, the thickness the strokes appear to be will scale with the graphic. For example, a 1px stroke can look like 5px if the graphic has been scaled up from its original size.

In order to be visible a stroke must have a width of at least 1px and a Stroke Color value other than “transparent”.

Dash-Array

The Dash-Array option allows you to break solid strokes up into dashed lines:

The option can be set to any pixel value, and the number you enter will determine both how long each dash is as well as the length of the gap between dashes:

Dash-Array Offset

If you are using Dash-Array to turn your graphic’s strokes into dashes, the Dash-Array Offset option allows you move those dashes along the lines they follow:

For example, if you set the option to 10px, all the dashes on your graphic’s strokes will be bumped forward by ten pixels.

Style All Elements

The Style All Elements option is a new addition as at version 6.4.8.

By default the SVG fill and stroke colors only affect path type elements and not shapes such as elipses and rectangles, as seen in the example pictured below:

Toggling the Style All Elements option to ON ensures that all SVG element types will be affected by your fill and stroke color settings:

Font Icons – Relevant Style & Content Options

Because font icons behave like text, you will see all of the same content and style sub-section settings available as you would on a text layer. However, because font icons are not actually text in practice, not all of these settings will have an effect:

For example, changing the Font Family will not effect the icon, because font icons are always set to use the font file they come from.

Let’s learn which settings are relevant to icons, and what they do.

Style – Font Size

The way to control the size of font icons is not through their width and height options, but rather through their font size option. Increase or decrease the font size to increase it decrease the icon size:

Style – Line Height

The Line Height option determines the height of the line the icon is on.

In the case of regular text, the line height setting controls the height of each line of text in a paragraph. With font icons, the line height setting controls the amount of space above and below an icon.

Whatever height you set for the line, the icon will automatically be vertically centered in that space, making line height useful for vertically aligning font icons.

For example, if you set the layer height to 150px, the icon will at first be aligned at the top:

But if you set the icon’s line height to also be 150px, the line will fill the entire container rectangle, and the icon will become vertically centered:

Style – Text Color

To change the color of a font icon, change its text color option. You can’t use a gradient here but you can apply any flat color:

Style – Background, Spacings and Border

You can use all the same background, spacings and border options on a font icon layer as you would on a text layer, or any other layer type:

Just be aware that when you modify these settings on a font icon they will effect the rectangular container that holds the icon, not the icon itself.

Content – Text Align

By default, when you click one of the Text Align buttons for a font icon you won’t see any change. However, where these alignments can come in handy is if your icon’s container box is wider than the icon itself. You can then decide where in the box the icon should be a aligned.

For example, your icon’s container width might be set to a little larger than the icon so you have room around it for some background and border styling to show. Remember, layer width doesn’t effect the size of font icons:

You could then center align the icon so its positioned nicely over its background:

You can combine this with the line height based vertical alignment technique we discussed above to both vertically and horizontally align an icon over a background shape.

Next: Background Layers

We’ve already covered quite a lot of material that applies directly to background layers, but there are still a few additional options to touch on.

In the next guide on Configuring the Background Layer we’ll begin with a round up and recap of relevant information from earlier in the manual, and then get to the background layers options we haven’t yet covered.

Adding and Configuring Icon and SVG Layers