Using Icons instead if images
Very often Icons can look better within the design of your web pages and still act to draw the eye. They can be seen in other elements of web pages such as buttons, social media, menus and as buttons in their own right. But, as with Images, Icon Boxes can also be used to introduce Titles and Descriptions. And there are over 5,300 icons to choose from!
Very often they are used simply to highlight products and services or highlights of a business or service. In their simplest form an icon is a simple button to another page (or popup) that gives more information. See below for a Swimming Class, 3 icons representing the class, creche and coffee shop. No links work in this example but see the effect of hovering over.
Swimming Classes
Click to see more
Below we can see an example from the SoundStratus mock-up website where text has been used to show the services the digital music label offer
Although the text is large and using a nice font, icons can create a better impression to catch the visitors eye whereas text on its own can be overlooked. Below we see Icon Boxes being used instead. Under each of the icons a link could be added to take visitors to a new and relevant page but in this case the boxes are there just to highlight the services.
Manage
Produce
perform
promote
RELEASE
But can we have similar motion effects on hover as we did with images or buttons? to a certain extent yes. Below we can see more description text so the boxes do have hover effects: the background colours of each box change when hover over. Give it a try.
Manage
Managed by one of our professional and experienced managers. The perfect match is found for you to make sure you reach your full potential.
Produce
Your music is produced and recorded in a state of the art studio by best in class experienced producers and engineers.
perform
SoundStratus will arrange gigs and promotion so you get maximum experience and exposure and build up that following.
promote
Our team will help promote you within the industry and to the outside world via the music press and social media.
RELEASE
Your work is released by our label on all digital musical platforms for downloads and streaming. All publishing rights and royalties belong to you.
And normal images can be bought into play as an effect as well. This time hover over to see the box backgrounds change to a relevant image.
Manage
Produce
perform
promote
RELEASE
More on Icons: The wonderful thing about icons is the great flexibility compared to images. Below we can see the same “lightning” icon displayed in multiple styles and colours
Default + Colour
Stacked square + Multiple colour
Framed Circle + Single colour
Frame square + Single colour
Framed square + Increased border/radius
Framed Circle + Reduced padding + Increased border + multiple colour
And they can be rotated between 1 and 359 degrees for even more effect.
Normal
180°
270°
Shop now for big discounts
Time is running
out
You'll love our
range
Custom Icons
There are many great standard web icons to choose from based on the industry standard Font Awesome version 5 set of icons.
But custom icon sets can be added via external services. These are Fontello, IcoMoon and Fontastic. or from other sources such as Flaticon. Or if you have your own icons or a designer to hand then this is also a possibility. (beware some icons or sets of icons do have a cost attached when downloading, so consult with Dynamiser first).
The example seen here shows the difference between the standard “Users” icon and then a different “Users” Icon added via Fontello showing how you can use different versions of the same theme.
Standard
Added
Another example of an added icon is the megaphone used in the SoundStratus Icon box example above. This icon was added via Fontello as there was not one in the standard list.
Info Circles
*** Note, only supported on Desktop *** Another great way is to use Icons to display multiple slides of information in the same space, instead of taking up space with multiple icon boxes for the same topic. Welcome to Info Circles where the icons are displayed evenly around the circle and as each icon is selected the information within the circle changes accordingly. This change of info can be automatic or upon mouse hover.
The first examples below show the standard 3 icons, the first will automatically jump between the icons in a clockwise manner, the text will change with each. The time spent on each piece of text can be set to ensure the visitor has time to read. The second depends on the user hovering over each icon in turn. Have a go.
LAWNMOWER REPAIRS
We can take in any lawnmower for repair or visit you for larger mowers. All our work comes with a 1 year guarantee
LAWNMOWER SERVICING
We can routinely service your mower to give you peace of mind when it comes to cutting your grass.
LAWNMOWER PARTS
We have most parts for most major manufacturers in stock, If not then we will happily assist with sourcing at the best price
Tree Surgery
Services
Tree felling
Tree Surgery
Services
Tree pruning
Tree Surgery
Services
Replanting
The second examples again show both auto and hover based circles but this time the number of icons has increased. For the first, we see different icons representing a different service offered. This time the background colour of the icon changes as each icon is reached so the visitor knows which icon the text relates to. The second info circle again changes focus but the primary colour changes instead (icon and border). Also, note the circle itself has an image background.
CONSULT
We will speak with you and your team to make sure we proivde all your requirements
DEVELOP
Our team will dedicate itself to putting together the agreed solution
TEST
The solution is tested in a safe environment with your teams input
Deploy
We will deploy the solution in a planned manner the suits your environment and timing
TRAIN
A bespoke training package will be put together and provided to your team
Xmas Trees
We sell the following types of trees
- Norway Spruce
-Fraser Fir
-Douglas Fir
Stands
We can Supply different styles and sizes of tree stands, all allow for water to be added to the base to elongate tree life
Delivery
We can deliver within a 15 mile radius of our shop
Advice
Our team are always available to help with choosing the right tree and looking after it
See be;low how one of the info circles can be used within a page header
fashionshack
Our quality Guarantee
At fashionshack we guarantee the quality of all our products and will happily exchange or give your money back should you find otherwise.
Find your size
your size not in stock? fashionshack will automatically dispatch from our factory to get your order to you in time
no sales gimics
We sell at genuine prices. All our products are sold at the normal price for at least 3 months before we slap on a sale price.