Challenges encountered with Bootstrap glyphicons while using the iPad

Need help with datetimepicker display issue

  <div class='input-group date' id='fuel-start-datetimepicker'>
          <input type='text' class="form-control" id="fuel-start-input" />
          <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
          </span>
   </div>

I have encountered a problem where the calendar icon is displaying as an emoji monkey on an iPad in Safari. I find it perplexing because when I switch the icon to a different glyphicon, like a star, it appears correctly. Interestingly, the same code works fine on the iPad independently:

  <span class="glyphicon glyphicon-calendar"></span>

The markup seems identical, so I am quite puzzled by this inconsistency. Any suggestions or explanations?

csstwitter-bootstrapipadmobile-safariglyphicons

Answer №1

Encountered a similar issue where the "glyphicons-halflings-regular.*" files were causing trouble with displaying emojis. Upgrading to the latest version of Bootstrap and replacing those files did the trick for me as well.

Answer №2

Within the glyphicons.css file:

@font-face { font-family: 'Glyphicons Halflings';

src: url('./assets/glyphicons-halflings-regular.eot'); src: url('./assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('./assets/glyphicons-halflings-regular.woff2') format('woff2'), url('./assets/glyphicons-halflings-regular.woff') format('woff'), url('./assets/glyphicons-halflings-regular.ttf') format('truetype'), url('./assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); }

I found success by changing "./assets/" to this directory.

Answer №3

My co-founder made a startling discovery today when she spotted a monkey emoji on our live web app. It was late in the day and we were all drained from working on an iOS app update, so naturally, none of us believed her at first (especially since no one had touched the web app code in weeks).

We decided to humor her and spent 40 minutes attempting to replicate the monkey emoji on both her phone and ours. We tried everything from private browsing to toggling WiFi to checking previous pages for any memory leaks. Nothing worked - it seemed like pure nonsense.

However, something about it nagged at me. So I delved into her phone settings and realized that during our testing with the Network Link Conditioner for the iOS update, someone had forgotten to disable it on her device. I adjusted the network speed from 3G to Edge, refreshed the page, and lo and behold, there was the monkey emoji.

Instead of the usual glyphicon-calendar, a 🐵 greeted me from the screen.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Position the "SHARE" button at the exact center of both the vertical and horizontal axes of an image (activating when the cursor hovers over it)

I'm currently working on a project and I really like the design on Fancy: . When you hover over an image, the background darkens and a button appears in the front. What I want to achieve is similar, but with a SHARE button instead. I have the image d ...

htmlcsssharecenter

Implementing FAQs on ASP.NET MVC is my latest project

I have stored all the questions and answers in a SQL Server table, and it is fetching them perfectly. The FAQ user interface displays all the questions correctly from the table. You can see the interface in action by clicking on the following links: Questi ...

htmlcssasp.netasp.net-mvc

Bootstrap is having trouble displaying the collapsed menu due to the abundance of content on the page

While the menu itself opens without any problems, I am facing an issue where the content within the menu is not visible due to other elements on the page obstructing the view. Ideally, I was expecting the collapsed drop-down menu to appear over the existin ...

javascriptjqueryhtmlcsstwitter-bootstrap

Position the Bootstrap Button on the right side of the navbar

Hey there, I'm completely new to the world of HTML/CSS and this is my first project ever. I welcome any constructive criticism that can help me improve in the future. Now onto my current dilemma: I've decided to use Bootstrap because it seems u ...

htmlcsstwitter-bootstrap

How can I align 2 buttons and a search bar on a single line so that they fully occupy the space?

Is there a more effective way to arrange 2 buttons and a search bar together on the same line so that they occupy the full width? <div class="panel-heading"> <div style="float:left;vertical-align: center;"> <a type="button" class="b ...

htmlcss

Design 5 interactive sections with the use of Bootstrap 4 framework to ensure optimal responsiveness

I am attempting to utilize Bootstrap 4 to create 5 responsive divisions. Can someone please review my code and guide me on how to achieve this? Any help would be greatly appreciated. If possible, could someone provide a sample for me to reference? Thank y ...

htmlcssbootstrap-4responsive-design

Creating a Pinterest-style grid layout for dynamic images in a React application using CSS Grid

I am attempting to use CSS grid to create a gallery for images, similar to Pinterest. I want pictures of different heights to be placed next to each other and fill the empty space. However, all the examples I have seen involve adding different classes to e ...

cssreactjscss-griddynamic-programming

Tips for accessing the names of subdirectories and files on a website

If we have the URL, is it possible to access the names of the files within the parent directory? Similar to how we can do in DOS by using the command "DIR" to view the list of files inside a folder. For example, if we have a URL like , I am curious to kno ...

php.nethtmlcss

Drop-down Navigation in HTML and CSS is a popular way to create

My navigation menu is functioning well and has an appealing design. The HTML structure for the menu is as follows: <div id="menubar"> <div id="welcome"> <h1><a href="#">Cedars Hair <span>Academy</span></ ...

javascriptjqueryhtmlcssnavigation

Shade the tag when the checkbox is marked

Is it possible to change the color of a label without using javascript when the associated checkbox is checked? ...

htmlcss

Creative ways to design the HTML5 `<meter>` tag

I am curious about how to style the <meter> tag in a new way. <meter value=80 min=0 max=100> 80/100 </meter> All I want to do is customize the background color and the value color, but I haven't been able to locate the appropriat ...

htmlcssmeter

Attempting to modify background by manipulating the state in Reactjs

I'm currently working on an app that features various games. My goal is to allow users to click a button and have the game display on the screen, with the background color changing as well. I aim to utilize state to control the overall background of t ...

javascriptcssreactjsbackgroundstyling

Animating with CSS3 triggered by JavaScript

Can you help me with an issue I'm having? When attempting to rotate the blue square using a function, it only works once. After that, the page needs to be reloaded in order for the rotation function to work again. Additionally, after rotating 120 degr ...

javascripthtmlcss

Utilize CSS to occupy the rest of the container's width

I have a header bar with three elements - a left section, a middle section, and a right section. I want the middle section to automatically fill up the remaining space in the header. How can I achieve this? header { background: red; } #middle { b ...

htmlcss

Issue with PrimeFaces radiobutton styles not updating after being clicked programmatically

My setup includes a p:selectOneRadio constructed like this: <p:selectOneRadio id="positionRadio" value="#{employeeBean.empPosition}" converter="#{empPositionConverter}" layout="custom" required="true" requiredMessage="Please select ...

javascriptcssjsfprimefaces

Modify the content of an element upon hovering over a different element

I have a set of three buttons and I want the text displayed in a box to change based on which button is being hovered over. If no button is being hovered, the default text should be "See details here". Is there a more efficient way to achieve this function ...

javascripthtmlcss

Executing a JavaScript function across multiple elements: A step-by-step guide

I recently came across this code snippet on w3schools.com: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} body {font-family: Verdana, ...

javascripthtmlcssimagegallery

Missing button element in HTML

I've been tackling a challenge while developing a quiz application. My aim is to display a button upon clicking the check button, but for some reason, it's not functioning as expected. var pos = 0, test, test_status, question, choice, choice ...

javascripthtmlcss

`CSS Content Placeholder Issue When Used Alongside JavaScript`

Let me explain a bit, I have a master page named UserProfile.master which has a content placeholder linked to UserProfileWall.aspx. Now, I am trying to incorporate some additional JavaScript and a second CSS file in the userprofilewall page. However, whene ...

javajavascriptjqueryasp.netcss

What could be causing my bootstrap cards to not appear side by side?

Check out my code snippet where I've defined two Bootstrap cards: <div id="detailPanel" class="col-lg-12"> <div class="col-lg-12"> <div class="card"> <div class="col-lg-6"> <div class ...

htmlcsstwitter-bootstraprazorbootstrap-4