Topic: Link Icons not showing inside Card elements…

Tagged: x

Author

Posts
October 7, 2016 at 12:17 pm #1207036
carlosca
Participant
Hi:

I’m trying to get some icons to show on links on a Card element, but the icons do not show. This is the code I used:
```
 <li><a title="Enviar eMail" href="mailto:[email protected]"> Enviar eMail</a></li>
 <li><a title="FB Iglesia" href="https://www.facebook.com/tiempocomunion" target="_blank"> FB Iglesia</a>
```
This is the page: http://x.iglesiant.org/nueva-prueba/ (the card to the right) where the icons do not show.

However, on this page: http://x.iglesiant.org/nuestras-iglesias/ where I don’t use Cards, the icons appear ok.

Am I doing something wrong, or do icons NOT work inside Card elements?
Thanks in advance.
October 7, 2016 at 3:06 pm #1207269
Joao
Moderator
Hi There,

Please try using the following code for the icons instead:
```



```
Let us know how it goes,

Joao
October 10, 2016 at 12:51 pm #1210237

carlosca
Participant

Thank you for your answer, Joao.
That’s the first code I used and, as a matter of fact, is the one I’m using on the page that shows the icons: http://x.iglesiant.org/nuestras-iglesias/

But it does not work, for some reason, inside a Card element…

🙁

October 10, 2016 at 1:53 pm #1210322

Rupok
Member

Hi there,

If you use the code provided by Joao, it should work. I have tested to insert this on your page and it seems working – http://prntscr.com/cs7ddq

And also your code doesn’t seems same as the other page’s code as it missing the data-x-icon value :



Let’s try to put the complete code like this :



Thanks!

October 13, 2016 at 6:09 pm #1215365
carlosca
Participant
Hello again, Rupok:

Very weird behavior… This is what I placed inside my Cornerstone Card Element for the links:
```
<ul>
 <li><a title="Enviar eMail" href="mailto:[email protected]"> Enviar eMail</a></li>
 <li><a title="FB Iglesia" href="#" target="_blank"> FB Iglesia</a></li>
</ul>
```
THIS is what shows when I display the source code for the page:
```
<ul> 
 <li><a title="Enviar eMail" href="mailto:[email protected]"> Enviar eMail</a></li> 
 <li><a title="FB Iglesia" href="#" target="_blank"> FB Iglesia</a></li> 
</ul>
```
On top of eliminating the ‘data-x-icon=”whatever” aria-hidden=”true”‘ part, Cornerstone is ADDING ’s on every line!

Please check the page again, it’s changed: http://x.iglesiant.org/nueva-prueba/

Thanks again for your kind attention.
October 13, 2016 at 11:43 pm #1215701
Paul R
Moderator
Hi,

Please change your code to this.
```
<ul><li><a title="Enviar eMail" href="mailto:[email protected]"> Enviar eMail</a>
 </li><li><a title="FB Iglesia" href="#" target="_blank"> FB Iglesia</a></li></ul>
```
Hope that helps
October 14, 2016 at 8:32 am #1216116

carlosca
Participant

Please see the above message to Rupok… That’s EXACTLY what I placed inside my Cornerstone Card Element. However, when the page is composed and displayed, the “data-x-icon…” part is ommitted…

http://x.iglesiant.org/nueva-prueba/

I’ve changed the second column, to include a Text Element, instead of a Card element. Here, the code is “respected”, but I’m still getting boxes instead of the appropriate icons…

;(

October 14, 2016 at 9:58 am #1216225

carlosca
Participant

Correction… on my pc the results are as follows (see attachment #1) – boxes instead of icons…
However, on my iPhone/iPad the results are that the icons don’t show at all! (see attachment #2)

October 14, 2016 at 10:11 am #1216251

carlosca
Participant

Never mind… I just decided I’m wasting precious time for something that should be dumb-proof. Eliminated the icons, will leave the links alone – too bad!!

October 14, 2016 at 4:05 pm #1216629

Rad
Moderator

Hi there,

I see, thanks for sharing. Let us know if there is something we can help with 🙂

Thanks!
Author

Posts

<script> jQuery(function($){ $("#no-reply-1207036 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>