Issue with CodePen and hidden display of social media link [solved]

Issue with CodePen and hidden display of social media link [solved]
0

#1

I am working on the random quote generator project. I have included a twitter link and am dynamically populating the href attribute of the link based on the quote displayed. The link does not appear on the screen. If I open up the developer’s console for the browser I am using, I can inspect the link element and I find that it has inherited the rule
display: none !important;
as it is one of a list of several web addresses that CodePen makes invisible.

What alternate method should I look at to get around this?

The CodePen rule:
a[href^=“http://www.facebook.com/share.php”], a[href^="http://www.digg.com/submit?"], a[href^=“http://wow.ya.ru/posts_share_link.xml”], a[href^=“http://vkontakte.ru/share.php”], a[href^=“http://vk.com/share.php”], a[href^="http://twitter.com/share?"], a[href^="http://twitter.com/intent/tweet?"], a[href^="http://twitter.com/home?"], a[href^="http://twitter.com/home/?"], a[href^=“http://twitter.com/?status=”], a[href^=“http://technorati.com/faves?add=”], a[href^=“http://share.yandex.ru/go.xml?service=”], a[href^=“http://service.weibo.com/share/share.php”], a[href^=“http://reddit.com/submit?url=”], a[href^=“http://plus.google.com/share”], a[href^=“http://pinterest.com/pin/create/link/”], a[href^=“http://pinterest.com/pin/create/button/”], a[href^=“http://pinterest.com/pin/create/bookmarklet/”], a[href^=“http://linkedin.com/shareArticle?"], a[href^=“http://facebook.com/sharer.php?"], a[href^=“http://facebook.com/share.php?"], a[href^=“http://digg.com/submit?"], a[href^=“http://del.icio.us/post?url=”], a[href^=”//plus.google.com/share”], a[href^=”//connect.ok.ru/dk?st.cmd=WidgetSharePreview”], a[href=“http://www.simplesharebuttons.com”], a[href=“http://www.facebook.com/sharer.php”], a[href=“http://www.addtoany.com/share_save”], a[href=“http://twitter.com/share”], a.odkl-klass-stat, a.odkl-klass-s, a.odkl-klass, a.mrc__share, a.mrc__plugin_share_friends, a.mrc__plugin_recommendations, a.mrc__plugin_like_button, .vk_share_button, .vk-like, .socials, .socialmedia, .socialbuttons, .social__icon, .socialButtons, .social-wrapper, .social-nav, .social-media, .social-link, .social-likes, .social-icons-big, .social-icons {
display: none !important;
}


#2

Can you post a link to the actual pen?


#3

I solved this by adding my own rule to the anchor element:

display: inline !important;

It did add an extra layer of difficulty to this challenge that I didn’t expect, though.

View the pen