Creating Icon Cards Video Transcript

Back to Creating Icon Cards Video


welcome in this video tutorial we're

going to talk about how to use icon


uh now just to show you an example of an

icon card if i go back to my homepage

here and scroll down

you'll see that we have these cool

looking hover button things

and so what these do is these are

basically links to other pages or

documents whatever i have

and they just add a nice bit of flair

pizzazz to your site you can see you can

add little icons

add descriptive text and when someone

clicks on that button

then it will take them to the separate

page that you're pointing them to

so to use these you're basically going

to add them to anywhere that use rows

and cards so

you know mostly landing pages basic

pages things like that

here i've got a basic page i'm building

out and i'd like to add an icon card

over here on the right side

so i'm going to edit this page here

and go to my rows and cards and in this

case since i'm

going to edit an existing row i'll find

that row and click edit

of course if i want to add it to a new

row i just add a new row down here

and i'll find the card content area and

i'm going to put this icon card next to

my existing basic card so i'm going to

click this little drop down here

or add a card and in this case i'm going

to add

an icon card first i'll give my icon

card some text

next you'll choose the positioning of

the icon

if you so choose to use one by default

it'll appear above

the icon text but you can have it appear

on the left or on the right

or if you don't want to use one then

just select none

here is uh where we input our

icon for the icon card and we use

a um a system from font awesome that

allows us to grab their icons from their


their gallery and add it to the icon

card so

for me to be able to add the icon i need

to first visit the gallery page

i'm going to copy this link here

open up a new tab and paste that in

and once the gallery opens up here um

you'll see that there's a lot of

different options all these options that

are highlighted are the ones that you

can use

and so what i can do is i can simply

search for something um

i don't think there's anything related

to pandas but i'll check

no it doesn't look like it okay let's

try to find something else

there's all kinds of icons here you know

any of the social media icons you can

find lots of other stuff too

let's say i want this laugh beam icon

i'll just simply

click on it

and then i'll scroll down to the button

where to start using this icon

and in this case normally i just like

grab this code and paste it in

but really because we're using an icon

card all i need to do is grab the name

of this icon so the name is going to be

in this white text right here

so i'm just going to grab that

by highlighting it and copying it

and then i'll go back to my icon card


paste that into the icon field

alright so now that we have the text we

have the icon let's

choose the link now you have a couple

different choices here

here if you want to you know simply

point someone to an external page maybe

you want to take them to google

then you would uh put in the full url

here so

you know it might be easier for me to

actually go to

highlight all of the text

and then paste it right there so that

this will make this button go to

um if you want to point to let's say

you know something in your media library

i can search for documents here too

so down here in the bottom you'll see

that i have this business license

pdf that shows up so i can select that

and this will actually take me to the

business license pdf if i click on it

so um you can use either or field but

you obviously don't want to use both so

if you're going to link to a new media


use down here if you're going to link to

a page use this up here

and then color so by default there's

going to be no color

and i'll show you what that looks like


so you'll see it's a clear background

it'll just take on whatever color

the background of the row is in this

case it's just the default white

but you do see that it does have that

little animation when i hover my cursor

over it

i do want to add some color so let's add

a splash of color here

we'll go back to the icon card

and in this case let's go ahead and

add black because we're talking about

pandas and those are black and white

why not and i don't actually want to

point to this

here i think i want to make this point

to my home page

so i'm going to click on this

go home all right so

now let's take a look

alright yes looks pretty nice the icon

card in the area that it takes up here

is the full

area of the card space so if i was using


an equal columns row then this card

would stretch all the way out to the


so just keep that in mind

all right i think it looks good let's go

ahead and save it and then test out our


all right so i'll scroll down there it

is if i click on it

it takes me to the home page all right

so it looks like it's working as

intended so that in a nutshell is how

you use icon cards