background preloader

The Elegant Icon Font – 360 Of The Best Free Icons For The Modern Web

The Elegant Icon Font – 360 Of The Best Free Icons For The Modern Web
We have set out to create the most beautiful, elegant and complete icon font on the web…for free! We have been struggling to find the best icon font to use in our own projects, so we decided to create our own instead. This font will be used in our themes, and we will continue to update the collection to satisfy the needs our designs. Unlike traditional graphics, these icons are housed within a font file, which means they are vector based and can expand and contract without quality degradation. The result is crisp, beautiful graphics on any display (including Retina displays). Furthermore, these icons have been optimized with pixel-perfect detail for 16px, and all multiples of 16px (32px, 64px, etc). Download The Icons Why Icon Fonts Are Awesome Icon fonts are great because they are flexible and fast loading. Complete Set and Unicode Reference Guide Complete List Of Class Names By Nick Roach I am the founder and CEO here at Elegant Themes. Related:  WebmasterDivi TemplateFONTES

<voice-elements> Provides you a simple DOM API to do speech synthesis (text to speech). In the following demo, we set some content into the text attribute. Then, by using the autoplay attribute, the voice is played when the element loads. Reload the page to hear it again. In the following demo, we define a different language by using the accent attribute. <voice-player id="mi-elemento" accent="es-ES" text="Me gusta la gasolina"></voice-player><script>var form = document.querySelector('#mi-form'), element = document.querySelector('#mi-elemento'); form.addEventListener('submit', function(e) { e.preventDefault(); element.speak(); }); </script> In the following demo, the text attribute is set according to the input value. Options Methods Events

Changing the Featured Blog Post Image Size in Divi 2.0 The popular Divi 2.0 WordPress theme from Elegant Themes includes a really nifty Page Builder that makes creating custom layouts simple and easy for anyone. The built-in Blog Module for the Page Builder allows you to quickly set up a nice Blog page for your WordPress site with a listing of your blog posts. Unfortunately, it only has two layout options: Fullwidth or Grid. What if you want to change the size of your featured post thumbnail image in the blog layout so that it floats to the left or right of the post excerpt instead of full width above it? I was surprised to find that achieving this basic blog layout was not clearly documented. To create a smaller featured image size and cause the Blog Module to use it, all I had to do was add the following code to my functions.php file: Now WordPress generated a custom featured post image that was the correct width and height dimensions (e.g. 320px by 260px) and the Blog Module used it as the featured image! ****** Update 10/28/2014 ******

Flaticon, plus de 50 000 icônes libres de droits On vous présente régulièrement des moteurs de recherche d’icônes, des sélections ou des sites dédiés. Mais dans le genre, Flaticon est clairement au-dessus du lot. On y trouve pas moins de 57 000 icônes ! Et de nouvelles sont évidemment ajoutées régulièrement. Les icônes sont accessibles via un moteur de recherche, par packs thématiques, par catégories, par auteur et même en fonction des tendances du moment. Aroma Icon Set Advertisement Today we are delighted to release another freebie for our design community. There are many free icon sets out there, and there are quite many commercial ones as well. Yet a good, consistently designed icon set is always a welcome addition to any designer’s toolbox. Oliver Twardowski had released the Ultimate Free Web Designer’s Icon Set (750 icons, including PSD sources) in the past, and this time he has prepared a fresh, new icon set which contains over 250 original high quality PNGs. Please notice that some icons may be similar to the ones released in the previous set. Download the Collection for Free! The elements contained in this collection are free for personal and commercial use. Behind the Design As always, here are some insights from the designer: “This set was started out in January 2011, so the whole design process took me nearly a year to finish. Thank you, Oliver Twardowski. (il) (vf) It's done. Leave a Comment Yay!

idriskhenchil/Fort.js 6 Steps to a Seamlessly Responsive Website with Divi Welcome to Day 36 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series! While it’s true that Divi is a beautifully responsive WordPress theme “out of the box”, it’s also true that when using Divi to create a unique website for yourself or a client a fair amount of testing, tweaking, and fine-tuning will be absolutely necessary as the custom design you’re creating comes to life. If, that is, you want the final result to be a flawless responsive website that looks perfect on every device. Having traversed this path many times for many clients I thought it would be beneficial to the Divi Community if I shared my design process and the lessons I’ve learned along the way. Let’s get started! 1. For me this is where the real secret to successful responsive web design lies. What is their current business mix? 2. 3. 4. 5. 6. In Summary By Melissa Love

100 greatest free fonts of 2014 It’s been a great year for fonts. New, more affordable, options in font design software, and more and more designers moving over to font design has produced a great crop of typefaces that are absolutely free to use for personal and commercial projects. Today we’ve put together a list of some of the greatest fonts we’ve found available, released in the last year, for cero dinero. You’ll find full families, sample weights, scripts, serifs, display fonts, and everything inbetween. These fonts will give you a ton of fresh, expressive, options to start out 2015 with. Browse through, pick out a few of your favourites to download, and if you use them in a project in 2015, let us know what you use them for! Born Fira Chelsea Brela Gagalin Moderne Sans Fonarto Smidswater Rabiola Fénix Cooper Hewitt Roboto 2014 Neythal Shadow Reis Floki Norwester Regina Boncegro FF Boxing Wizards Kino 40 Raw Font Bizon Lekea Ruina Vinta Densia Sans Curely Magra Ch. Hallo Sans Troika Raggedways Madariaga Axis Pirou Atletico Regular Nex Rust Moka Jauría

Silk Icons “Silk” is a smooth, free icon set, containing over 700 16-by-16 pixel icons in strokably-soft PNG format. Containing a large variety of icons, you're sure to find something that tickles your fancy. And all for a low low price of $0.00. You can't say fairer than that. Current version: 1.3. View all icons (.png file, 1Mb) Download License I also love to hear of my work being used, feel encouraged to send an email with a link or screenshot of the icons in their new home to mjames at gmail dot com. The icons can also be used under Creative Commons Attribution 3.0 License (Hi Debian folks!) As an author, I would appreciate a reference to my authorship of the Silk icon set contents within a readme file or equivalent documentation for the software which includes the set or a subset of the icons contained within. Sightings Do you use this set? Donate People have expressed a wish to donate a little money.

jQuery How To Use And Embed An Icon Font On Your Website Last week we released a pack of 100 line-style icons. Today we are releasing those exact icons in the form of a 100 piece icon font along with an extensive tutorial about how to use them. Icon fonts are great for their scalability on high-resolution displays and they can be treated and styled exactly like text. Download The Font Pack Embedding an Icon Font 1. 2. 3. Using an Icon Font 1. 2. The results are visually the same, but we will be using the class method so that we can easily style the icons using external CSS. Examples of Styling and Implementation The instructions and examples below cover some of the different ways you can use an icon font on your website. 1. You can add an icon within any body of text. To achieve this, paste this html into a Divi text module (or any text field in any theme) and the following css into your style.css file (or custom css box in ePanel if you are using an Elegant Theme). 2. 3. 4. 5. 6. Using Icon Fonts in Desktop Applications 1. 2. 3. By Kenny Sing

font dragr | Drag and drop font testing Fugue Icons Web Starter Kit — Web Fundamentals Download Web Starter Kit (beta) What is Web Starter Kit? Web Starter Kit is an opinionated boilerplate for web development. Tools for building a great experience across many devices and performance oriented. Helping you to stay productive following the best practices outlined in Google's Web Fundamentals. Features Quickstart Download the kit or clone the repository and build on what is included in the app directory. There are two HTML starting points, from which you can choose: index.html - the default starting point, containing Material Design layout.basic.html - no layout, but still includes our minimal mobile best-practices Be sure to look over the installation docs to verify your environment is prepared to run WSK. Web Performance Web Starter Kit strives to give you a high performance starting point out of the box. Browser Support At present, we officially aim to support the last two versions of the following browsers: ChromeEdgeFirefoxSafariOperaInternet Explorer 9+ Troubleshooting Learn More

Elegant Tweaks | Featured images vs grab the first post image Elegant Themes gives you a few options for displaying images on blog posts as well as blog and category pages and using the Divi blog module. It’s much easier to achieve your desired layout if you have a basic understanding of how the images will be generated and displayed BEFORE you start creating blog posts. The purpose of this tutorial is to provide the basics to get you started. Featured Images If you set a featured image for a blog post, your theme will default to this image when viewing the post itself and will use the thumbnail of this image when viewing blog pages, category pages, and the Divi blog module. Removing featured image thumbnails from preview pages You can turn the featured image off by going to the Epanel->Layout Settings->General Settings and disabling “Show Thumbs on Index pages”. Removing featured image from blog posts Most people want the featured image displayed in both places so the default settings are usually ideal and none of the changes above need to be made.

Related: