You can use this icon font with any your projects, and you don't have to pay for it! It's totally free and licensed under CC BY 4.0.
Using svg or font icons instead of images can make your site lighter, because you need to load only your icon font, you don't have to use heavy images now! Load font once and use several icons.
Font icons can make your site look better! Clear and beautifully drawn, these line icons will make your clients happy! Or, at least, will improve your product's UX.
150 unique, pixel-perfect icons in 24px and 30px base in a single font! You can download the font, or separate SVG icon files as well.
The procedure of adding is easy as ABC! Use special CSS classes, Unicode entities, or import SVG icon files.
You can edit the way your font icons look using CSS rules, and also animate them.
If you want to place an icon on your button or replace your image with it in the Mobirise Builder app, there is no special action needed. Mobirise contains a special extension to work with icon fonts and this font is available by default.
If you want to add some icons to your page made with other tools, install a icon font to your page first.
1) Download the icon font files, and put the mobirise folder to the same folder with your page. If you change the location of this folder, don't forget to correct the path to style.css file noted in code.
2) Add a special style.css file to your page:
Please make sure that also your icon font files available in the mobirise/fonts folder (mobirise.eot, mobirise.svg, mobirise.ttf, mobirise.woff).
3) Then you can use special classes to add icons to your page:
Also, there are special codes for icons, view the cheatsheet to learn more.
You have a set of 150 linear font icons, but want more? Maybe you should try to unite them to have unusual combinations. It seems to be easier for you to work with them as pictures in some image editor, but using CSS to position your icons is also a way.
Make a container for your icons and position them inside. We used the relative position for the laptop icon in this example, and the absolute position for the heart icon.
It's pretty easy, but some of you still can find it helpful. You can change the color of your font icon on hover, its background, make it bigger or smaller, just use the simple CSS rule.
:hover is a pseudo-class that applies while a user keeps a pointer over an element. You can also find more info about the :active and :focus pseudo-classes.
We use the hover pseudo-class to highlight a hyperlink. If you want to make your icon hyperlinked, it will look more natural if it changes its appearance on hover.
We'll change the color of our font icon on hover to make it saturated. We use the "Download" icon, it has this class: mbri-download.
Most modern browsers except for IE9 support CSS transitions and animations. If you're using IE9 or earlier versions of IE, please note that you won't see some examples we want to show here.
You can make your effect smoother using the transition properties or transition shorthand property to set the values of transition-property, transition-duration, transition-timing-function, and transition-delay. This helps to set an effect of transition.
It the example we set the duration value for our effect. Our effect here is text-shadow, and we use three shadows at the same time.
The font icon in this example has this class: mbri-sun, but you can add another class as well.
Since our example icon is the sun, we'll make it yellow and glow on hover.
The @keyframe rule specifies the animation code. Set your frames and thus you will create an animation that changes from one set of CSS Style to another.
In our example, we'll add a pulsing animation to make our "Heart" icon beating. We have added the pulse class to our icon.
You can add the same class to several icons and make some rules with your selector.
We'll add a round background to our icon set in this example. Both font icons have .mbr-iconfont class.
Using web icon fonts give some benefits, but also there are some limitations in modifying. CSS effects we can use for them are the same we use for text. Using SVG icon files can provide more possibilities, so we also provide .svg files.
You can simply use .svg icon files as images files.
It's considered as the best way to add SVG icons to pages if you intend to modify your icons using CSS and scripts without placing them to HTML directly.
You can use the code of your SVG icon files. Download some SVG icon and open it using any text editor to learn its code. You can simply paste it into your HTML code.