yonkov / ionicons Goto Github PK

Ionicons is a completely open-source icon set with 1,300 icons crafted for web, iOS, Android, and desktop apps. Ionicons was originally made for the Ionic Framework, a cross-platform hybrid and Progressive Web App framework.

Using the Web Component

The Ionicons Web Component is an easy and performant way to use Ionicons in your app. The component will dynamically load an SVG for each icon, so your app is only requesting the icons that you need.

<ion-icon name="logo-facebook"></ion-icon>

Also note that only visible icons are loaded, and icons which are "below the fold" and hidden from the user's view do not make fetch requests for the svg resource.

Download this repo and place it in your project or use a cdn.

Download this repo and place the following <script> near the end of your page, right before the closing </body> tag, to enable the font. If you have placed the ionicons folder in the project's root folder, use the following relative paths:

<script src="/ionicons/ionicons.esm.js" type="module"></script>
<script src="/ionicons/ionicons.js"></script>

For more information on how to load the icons locally, check the following article: 2 Ways to Load Ionicons in WordPress (Locally and with CDN)

Use the following <script> to load the icons via CDN:

<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>

For more information on how to load the icons with a CDN, check Ionicons official documentation.

The 5-th version of the icons works great on all modern browsers (Chrome, Firefox, Safary, Opera, etc.) and has partial support for Internet Explorer. With a few small css tweaks it can be made to work flowlessly with Internet Explorer 11. If you need to support this aging browser, you should add the following css to display icons in outline version:

/* IE 11 Ionicons fix */
.ionicon-stroke-width {
  stroke-width: 32px;
  stroke: #333;
}

.ionicon-fill-none {
  fill: none;
}

(C) 2013-2021 Ben Sperry, MIT