Hi there! Welcome to OSU Drupal Droplets!
This is Joe Fenn with Oregon State
University's Web and Mobile Services and
today we're going to continue our
exploration of the CKEditor module by
taking a look at how we can combine two
of our custom Web and Mobile Services
plugins to insert an icon into a button
along with the text. So, we're going to be
combining the Button Picker and the Icon
Picker together to give us this result
that we want. So, let's jump on in to our
test page by clicking the Edit tab
and we'll scroll on down to our CK
Eeditor and, just as a reminder, here we
want to make sure that the Text Format
is set to Full HTML so that way we have
our buttons available up here. And here
you can see that we've already created a
test button, now let's go ahead and just
pop an icon into there. So, we'll just put
our cursor right at the beginning, or the
end, of the text and let's click our Icon
Picker and let's choose one of the OSU
icons here. So, just for fun, we'll choose
a robot and let's make it a large icon
and let's color it white, because we want
it to be able to show up on that orange
and gray background, because when we
hover on the button it'll be kind of a
grey color. Once we have applied all our
settings here let's come down and click
the OK button. Now it's gonna look weird
okay? That's fine.
Just go ahead and go down and click Save
and you'll see that everything will
adjust once we save. And there you have
it! We have our icon, we have our text too.
And, if we click it, we go to the Oregon State
University homepage. And that is it. This
has been Joe Fenn with Oregon State
University's Web and Mobile Services
and I look forward to seeing you in future tutorials!
