Placeholder Image

字幕表 動画を再生する

  • has a guy and guys, my name is dumb.

  • And today I want to show you how to use iconography on your Web sites or your Web applications using the Iron Icons Library.

  • So basically I own icons is a free and open source icon set containing over 700 icons for both the IOS and material design style.

  • So you can choose one of these two souls and use it for your icons.

  • So it actually comes packaged with the Ionic framework itself.

  • But you can use it without the Ionic framework.

  • So we're gonna learn how to do that in this video.

  • So the first thing to do is to actually install the icon set in your HT Mel Farr.

  • So we can go to your iron icons dot com forward slash usage and then scroll down to the installation section.

  • We can now copy and paste this script tag inside out.

  • Html fall.

  • So, for this far out here, it looks like this.

  • We can just go down here and paste it right below the finishing so wth e end off the body type.

  • So now we have the ark onset installed inside the HTML foe.

  • We can now use it Very simply, I guess so.

  • The way this works is that each icon has its own web component.

  • So to use an icon below the H one tag, we can create a new tack.

  • It will be the ion dash eye contact.

  • So this is a custom web component for the iron Icon framework.

  • So the Iron Icon, our conceptual library.

  • Okay, so, um, to specify what icon you want, you can do so using the name attributes.

  • So inside here, we're gonna talk about name equal to your empty string.

  • Finnell.

  • We're gonna fill this with a prefix off the design to use, followed by the actual icon name.

  • So back to the Iron Icons website.

  • We could go over to the Ark on section and then choose one of these are cons.

  • Let's choose the app spike on as an example.

  • Not so.

  • If I choose this, we get the name off the Yarkon.

  • It's called Apse, so I can simply put taps inside here.

  • So if you're using the iron icons, I can't sit with the Ionic framework.

  • You can simply do this and you're done.

  • The design style is going thio automatically be chosen based on the three OS, all the device it's running on.

  • But in this video, we're looking at using it without the Ionic framework.

  • So we have to actually specify the top of designed to use.

  • So we have we have the material design or the iris design or stop so we can see the difference between these two designs right here.

  • So to specify the actual design stole, we can pre fix it with honor MD or IOS.

  • So, for example, let's talk a m d dash APS just like that.

  • So now this for dinner and s Beijing off the apse icon for material design so I can save this and refreshed my browser.

  • And we get this right here and spg for the apse icon in material design like a perfect.

  • So we can simply change this to Iris to achieve the Islas version off that Apsara, I can say Listen, refresh.

  • And we get this right here, okay?

  • So critical to actually customize these size and the color off these icons weaken Do so using a CSS or in the case of the size, we can use an attribute.

  • So it was that all I can say space and say size is equal to lodge to create a large park on.

  • I can save this and be fresh.

  • I have to get a bigger icon right there.

  • Okay, so to actually do that using CSS, it's quite straightforward as well.

  • I'll give you this and go inside a new style tech, and we're gonna target every aisle icon element inside the weapon.

  • So top at eye on a dish I can't inside.

  • Here we can put a font size property so we can say fun size and the documentation recommends you use font sizes in multiples of act.

  • So, for example, 8 16 32 or 64 so on.

  • So let's say 64 pixels for these particular size.

  • I couldn't save this Hendrik fresh and we get a much larger like a perfect.

  • We can also customize the color by using the ceases color, property color and then blue.

  • Okay, I can say this and refresh.

  • And now we get this right here.

  • And that's how you can use the iron.

  • Arkan's friend work What?

  • Sorry, the on icons library to achieve iconography inside your websites or your Web applications.

  • But thanks for watching.

has a guy and guys, my name is dumb.


動画の操作 ここで「動画」の調整と「字幕」の表示を設定することができます

B1 中級

Ioniconsでウェブ上のアイコンを使う (Using icons on the web with Ionicons)

  • 0 0
    林宜悉 に公開 2021 年 01 月 14 日