How do you use the icons?

User 2684599 Photo


Registered User
12 posts

Hi,

I'm kind of new to web development [but not development in general]. I've looked at the social media icons generated by RLMP and as far as I can make out [tell me if I'm wrong..] it uses the <i> tag to create a CSS class [which is great]. I don't understand how this works as an icon though? Do I need to create a clickable area around the icon [cos that would suck] or is there a simpler way to get this done?


Barry
New Street Photography
Barry
New Street Photography
User 103173 Photo


VP of Software Development
0 posts

Here is what you would do Barry:

This code:
<ul class="social-media"><li><i class="large icon-facebook"></i></li><li><i class="large icon-twitter"></i></li><li><i class="large icon-linkedin"></i></li><li><i class="large icon-google-plus"></i></li></ul>

Would become this:
<ul class="social-media">
<li><a href="http://facebook.com"><i class="large icon-facebook"></i></a></li>
<li><a href="http://twitter.com"><i class="large icon-twitter"></i></a></li>
<li><a href="http://linkedin.com"><i class="large icon-linkedin"></i></a></li>
<li><a href="http://google.com"><i class="large icon-google-plus"></i></a></li>
</ul>
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2684599 Photo


Registered User
12 posts

Hi,

Thanks for the help.

I figured it out and was actually here to post it

<li><a href="http://www.facebook.com" target="_top" title="Facebook" onMouseOver="window.status='Facebook'; return true" onMouseOut="window.status=' '"><i class="large icon-facebook"></a></i></li>

With the help of the quite nice tools [CTRL L | Insert -> Link on the menu] that I haven't even had the chance to look at yet :-)

Is there any plan to add more code support to RLMP like links?
Is there somewhere to suggestions for supported features in later releases?
Would the etiquette be to put these questions in a new post?

Also is there a better way to find your original post that searching for your name? [Or "New Street Photography" which works well as it's unique]


New to these groups, and to web development [though not development in general]...

Again thanks

Barry
New Street Photography
Barry
New Street Photography
User 38401 Photo


Senior Advisor
10,951 posts

Hiya Barry,

You can use the buttons at the top of the screen to add the forum threads you want to find easily to either your favorites or subscribe to get emails on follow up posts. :)
User 2740462 Photo


Registered User
17 posts

Hi,
Is there an icon for Instagram?
User 2088758 Photo


Senior Advisor
3,121 posts

Hi Michael, you can get an icon for Instagram right from their website.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2740462 Photo


Registered User
17 posts

Sorry I guess my question wasn't specific enough. I meant where are the social media icons physically located? I guess I am confused as to where the icons are actually referenced from.
I don't believe it's as simple as just adding
<li><a href="http://instagram.com"><i class="large icon-instagram"></i></a></li>
User 10077 Photo


Senior Advisor
1,096 posts

There are a number of predefined classes available in RLM.
http://www.coffeecup.com/help/articles/ … out-maker/

One of the types of classes is icons. Here is a list of the icons available.
http://www.coffeecup.com/help/articles/ … ker/#icons

You will see the icon for Instagram in the list.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
User 2740462 Photo


Registered User
17 posts

Thank you so much for the info, so it is that simple. Go reference info to have for the icons.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.