반응형

[ICON] ion-icon 아이콘 사용하기 

https://ionic.io/ionicons

 

Ionicons: The premium icon pack for Ionic Framework

Ionicons is an open-sourced and MIT licensed icon pack.

ionic.io

Installation

If you're using Ionic Framework, Ionicons is packaged by default, so no installation is necessary. Want to use Ionicons without Ionic Framework? Place the following <script> near the end of your page, right before the closing </body> tag, to enable them.

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

Basic usage

To use a built-in icon from the Ionicons package, populate the name attribute on the ion-icon component:

<ion-icon name="heart"></ion-icon>
반응형
반응형

아이콘 다운로드 

 

icons8.com/icons/set/file

 

Download free icons, music, stock photos, vectors

Designers, download the design stuff for free — icons, photos, UX illustrations, and music for your videos.

icons8.com

 

 

반응형
반응형

App Icon Generator

https://appicon.co/#app-icon

반응형
반응형
Automatically Generate Splash Screens and Icons with Ionic CLI





반응형
반응형

jQuery fontIconPicker: Add an icon picker to your admin forms

The jQuery fontIconPicker makes it simple to add an icon picker and search function to your administration forms. It can be triggered on a SELECT or TEXT input, and has multiple usage options.

아이콘 셀렉트/콤보 버튼, 선택  -  http://codeb.it/fonticonpicker/

iconpicker

jQuery fontIconPicker is a small (1.58kb gzipped) jQuery plugin which allows you to include a simple icon picker with search and pagination inside your administration forms. 

 

 Legend:

 How it works
 Basic: Load from SELECT input field
 Load from TEXT input field (no empty icon, no search)
 Load icons from Fontello JSON config file
 fontIconPicker validation
 Change icon set on the fly
 Trigger event on icon change
 ACF { fontIconPicker WordPress plugin
 Browser compatibility
 Credits

 

 

 

반응형
반응형

Makeappicon: Generate properly sized icons quickly and easily

makeappicon

 

반응형
반응형

THE MOST COMPREHENSIVE INDEX OF FREE ICON FONTS/ICONIC WEB FONTS

 

http://www.functionn.in/2012/11/the-best-free-iconic-web-fonts.html

 

 

반응형
반응형

Why Web Icon Fonts are brilliant

http://www.crearegroup-webdesign.co.uk/blog/videos/web-icon-fonts.html


Posted Friday 14th Dec 2012 by Rob Bavington 1 Comment

My brother James and I have been chatting a lot over the past week about how amazing Icon Web Fonts are, so I’ve put together a little video blog to show the key benefits. If you’re unfamiliar with Icon Fonts, they’re not too dissimilar from Wingdings. They’re useful, lightweight, modern typefaces that are perfect for displaying icons on your website without the baggage that often comes with using images.

Now we’ll talk about these specific Icon Fonts in a moment, but typefaces like Font Awesome, which is free, or Fico carry huge benefits to designers – which is probably why they’ve been so popular with web designers in 2012.

You can think of Icon Fonts as any normal font or web-font. As a designer you can easily adjust the size, colour and even add shadows with CSS. Icon Fonts work in almost all browsers including IE6, which means you get transparency without messing around with any ugly hacks. Most importantly, a lightweight or hand-picked Web Icon Font will load quicker in the browser that it’s image counterpart which will help with your page-speed optimization.

Web Icon Fonts have been huge in 2012

James and I think there’s 3 simple, key reasons why Icon Web Fonts are so popular in 2012:

  1. The icons are simply pretty cool and modern
  2. Responsive web design
  3. Retina displays.

So with Responsive web-design, there’s a good chance that you might want to increase or decrease an icon’s size, particularly if you’re using it within a button. Just like text, you can use media queries to simply change the type size without needing to reference a different image file. And unlike raster, pixel based images – Icon Fonts are vector so they look crisp at any resolution.

If you haven’t already, we’d recommending heading over to some of the many Icon Fonts available online. Like we mentioned earlier, Font Awesome is a great starting point as their current free set includes over 200 icons and can be installed and used on your website within minutes.

There’s also plenty of premium paid Icon Fonts and also great tools like Fontello where you can create your very own hand-picked, lightweight hybrid Icon Font by combining the best of the free Icon Fonts available.

So, wrapping up – we’re pretty confident that Icon Fonts are going to continue in popularity in 2013. It wouldn’t surprise us if the Google Web Font archive dons a set or two in the near future.

Example results when using Font Awesome, as shown on their web page.

Example results when using Font Awesome, as shown on their web page.

Web Icon Fonts & SEO

Also, don’t worry about the potential SEO headache of having random single letters hanging around your HTML markup. Icon Font Packs, like Font Awesome for example, have been set-up so that you can render with empty italic tags.

If you refer to the embedded image opposite, and the HTML markup below, you can see how the empty italics tags are used with a class to render icons in a similar fashion to how we might use span tags.


1
2
3
4
5
6
7
8
</pre>
<ul class="nav nav-list">
    <li class="active"><a href="#"> Home</a></li>
    <li><a href="#"> Library</a></li>
    <li><a href="#"> Applications</a></li>
    <li><a href="#"> Settings</a></li>
</ul>
<pre>


Thanks for watching this week, check out our supporting post for more resources and live examples of Icon Fonts in action from around the web.


반응형

+ Recent posts