Back to Creating Icon Cards Video
welcome in this video tutorial we're
going to talk about how to use icon
cards
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
i
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
and
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 google.com
highlight all of the text
and then paste it right there so that
this will make this button go to
google.com
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
item
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
here
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
like
an equal columns row then this card
would stretch all the way out to the
middle
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
link
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