1. lazyroby
  2. Sherlock Holmes
  3. Commercial Templates
  4. Tuesday, 19 December 2023
  5.  Subscribe via email
Hi Ciaran,

I use your latest Module "mod_j51calltoaction_j4" with Emani_J4 and inserted an individual Font Awesome 5 icon and a thin border on the right into the button (next to the text). On the web (Firefox, Chrome, Edge) it works perfect. button-web.png

On my iPhone XR (latest iOS 17.2) and also on my iPad it won't show the icon. button-iphoneXR.jpg

My module setup: button-setup.png

My custom-css looks like this:

/* button-orange rgba(251, 156, 63, 0.9) */
.button-orange {
border: 1px solid var(--secondary);
color: var(--secondary);
-webkit-box-shadow: 0px 0px 4px 0px rgba(24, 59, 97, 0.9);
box-shadow: 0px 0px 4px 0px rgba(24, 59, 97, 0.9);
border-radius: 0.8em !important;
-webkit-border-radius: 0.8em !important;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
text-decoration: none;
background-color: var(--primary);
}

.button-orange:hover {
border: 1px solid var(--secondary);
color: var(--secondary);
-webkit-box-shadow: inset 0px 0px 4px 0px rgba(24, 59, 97, 0.9);
box-shadow: inset 0px 0px 4px 0px rgba(24, 59, 97, 0.9);
border-radius: 0.8em !important;
-webkit-border-radius: 0.8em !important;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
text-decoration: none;
}

/* Font Awesome Links Before */
.fa-ext-link:before {
content: "\f08e";
font-family: FontAwesome, "Font Awesome 5 Free", fa-solid-900;
margin: 0px 8px 0px 0px;
padding-right: 8px;
border-style: solid;
border-color: var(--secondary);
border-width: 0px 1px 0px 0px;
color: var(--secondary) !important;
display:inline-block;
font-size: inherit;
text-rendering: optimizeLegibility;
font-weight: fa-solid-900;
}


What can I do to make it work on iPhones and iPads? I really want to use your module. Unfortunately I am not able to give a link to the website. Thanks in advance! Ro
Attachments (3)
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

We are currently unable to replicate this issue locally. Once your site is available, could you provide a URL and we will examine this issue further.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Hey. I'll send access to my site via mail.
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

Within the upgrade to Joomla 4, Joomla has changed the primary Font Awesome library to version 5. With this version there has been a change in the markup to display an icon. To display an icon try adding the following to the content tab of your CallToAction library followed by your text (https://fontawesome.com/v5/icons/link?f=classic&s=solid)...

<i class="fas fa-link"></i>


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.