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.
On my iPhone XR (latest iOS 17.2) and also on my iPad it won't show the icon.
My module setup:
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
