I am trying to make social icons using round corner divs and fontawesome. It works well on my desktop computer, but on mobile the font size seems to rendered smaller.
HTML:
<a href="LINK" target="blank">
<div class="social-icon facebook">
<i class="fa fa-facebook"></i>
</div>
</a>
CSS:
.social-icon{
-moz-border-radius: 138px;
-webkit-border-radius: 138px;
border-radius: 138px;
border: 5px solid;
text-align: center;
width: 50px;
height: 50px;
display: inline-block;
margin-bottom: 15px;
}
/* Facebook icon Styling */
.social-icon.facebook {
font-size: 20px;
padding-top: 6px;
border-color: #3b5998;
background-color: #3b5998;
color: #ffffff;
}
I have tried to play around with the font awesome CSS without any luck.
It seems like it had something to do with the lineheight which was rendered differently on my tablet/smarphone compared to my pc. This resulted in different y-posistion of the font-awesome icons. So on my pc it looked great, but on my mobile devices the icons was closer to the top. So I have set the lineheight to 1px and then i only control the y-position with padding-top.. It might not be the best solution, but it worked... however it still seems that the size of the icons differs a little on the different platform, but it is hard to tell..
Related
I am having this issue for chrome (Mozilla works fine) when I float:right a specific span the text within shrinks. This is only happening on the responsive design mode in chrome, but it also occurs in live mobile version.
There may be an overarching issue. In the first photo, the icon and text is squished together, and this doesn't happen in firefox or in regular chrome.
Here is a picture without the float right.
Here is a picture with float right
Here is the abridged HTML
<div class="post-footer">
<span class="tag"><i class="fas fa-tags"></i>music</span>
<span id="date" class="tag"><i class="fas fa-calendar-plus"></i>June 7th, 2018</span>
</div>
Here is the CSS
.post-footer {
padding: 15px;
}
.post-footer .tag {
border-radius: 200px;
background-color: #c0392b;
color: white;
padding: 5px 15px;
font-weight: 500;
}
.post-footer .tag i {
padding-right: 10px;
}
#date {
background-color: #27ae60;
float: right;
padding: 2px 12px;
}
Any ideas to why chrome is acting this way? Is there a wiki or guide to common browser bugs?
EDIT: The site seems to work fine on an iPhone in safari and chrome. It does not work a S9 with Chrome.
The complete code can be found here
Having problem with extra padding on a <button> element in iOS safari browser.
The markup is like this, using font-awesome icons:
<button type="submit" class="btn-class">
<i class="fa fa-plus"></i>
</button>
This is the CSS for the class in the button element:
background: #000;
width: 25px;
height: 25px;
border-radius: 100%;
border: none;
color: #fff;
font-size: 1em;
line-height: 25px;
text-align: center;
On a computer with Chrome as the browser I get this output.
But when using iPhone iOS 8.1.2 and Safari there is a strange padding to the left of the plus sign:
Any ideas on what the problem is?
EDIT
here is a fiddle on the code.
http://jsfiddle.net/qpvat7xv/
Simply add padding: 0 to your <button> style:
button {
-webkit-appearance: button;
cursor: pointer;
font: inherit;
overflow: visible;
text-transform: none;
padding:0;
}
This will solve the bug with Button tag which creates the padding in iOS.
I'm been searching the web for a while looking for a way to put a icon in a white border circle with transparent background,
Anyone got some input this? it's doable?
think something like
<Code for circle> <i class="glyphicon glyphicon-plus"></i> </circle end>
Btw, it need to work in a mobile browser. thx for everyone's time!
You can do this using border and border-radius CSS properties:
CSS:
.rounded-icon {
border: 3px solid #fff;
display: inline-block;
border-radius: 26px;
width: 26px;
height: 26px;
text-align: center;
}
HTML:
<div class="rounded-icon"><i class="glyphicon glyphicon-plus"></i> </div>
jsFiddle demo
Suppose your circle icon is in a div with class "icon". I would suggest using an extremely large border radius in CSS to emulate a circle, and simply add a white border, say 2px wide:
.icon {
-moz-border-radius: 999px;
-webkit-border-radius: 999px;
-khtml-border-radius: 999px;
border-radius: 999px;
border: 2px solid #fff
}
If you also want this to work in IE8, you may also want to refer to using PIE, here: http://css3pie.com/
I'm trying to create a question-mark-inside-a-circle glyph using CSS. It should look like © basically.
Here's what I have so far.
a::before
{
content: '?';
font-size: 60%;
font-family: sans-serif;
vertical-align: middle;
font-weight: bold;
text-align: center;
display: inline-block;
width: 1.8ex;
height: 1.8ex;
border-radius: 1ex;
color: blue;
background: white;
border: thin solid blue;
}
It's not bad on firefox but the positioning of the question mark inside the circle is off-centre on Chrome (and I don't have IE to test but I'm assuming the worst).
I don't understand much about the nuances of fonts. Can this approach be made to work cross-platform or should I give up and use an image? I'm doing it this way to keep it scaled with the font.
UPDATE: Tweaking the settings as suggested so far is providing improvements only in select circumstances. There always seems to be some font sizes for which there is more than a rounding error (more than 1 pixel that is) of off-centreness either horizontally or vertically. The goal is to fit the border to the question mark, not fit the border to the square box which contains the question mark, as I suspect is happening.
See this fiddle: http://jsfiddle.net/hg7nP/7/
Highlighting only the things I changed:
.infolink:before {
font-size: 1.4ex;
line-height: 1.8ex;
border-radius: 1.2ex;
margin-right: 4px;
padding: 1px;
text-decoration: none;
}
Regarding cross browser, it is working in all browsers except IE < 9 where border-radius won't work.
Based on the Abhitalk's answer and playing with it a bit, I've came up with a responsive approach, where the question mark and the circle are both scale in proportion to the base font size so you can easily set the size of the whole thing:
.infolink:after {
content: '?';
display: inline-block;
font-family: sans-serif;
font-weight: bold;
text-align: center;
font-size: 0.8em;
line-height: 0.8em;
border-radius: 50%;
margin-left: 6px;
padding: 0.13em 0.2em 0.09em 0.2em;
color: inherit;
border: 1px solid;
text-decoration: none;
}
Use it like this:
<div class="infolink" style="font-size: 20px"></div>
If you see how this can be improved further, your comment is very welcome!
Looks like you're missing line-height:1; Add that and it gets significantly better.
Personally I think it looks best with font-size:50%, but that's my opinion.
Updated Fiddle
W3C schools has a useful guide for creating circular question marks using Awesome Fonts and unicode, tested in Chrome, Firefox, Edge and IE and appears consistent in all, please see demo:
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1>fa fa-question-circle</h1>
<i class="fa fa-question-circle"></i>
<i class="fa fa-question-circle" style="font-size:24px"></i>
<i class="fa fa-question-circle" style="font-size:36px"></i>
<i class="fa fa-question-circle" style="font-size:48px;color:red"></i>
<br>
<p>Used on a button:</p>
<button style="font-size:24px">Button <i class="fa fa-question-circle"></i></button>
<p>Unicode:</p>
<i style="font-size:24px" class="fa"></i>
</body>
</html>
Sourced from W3C Schools: https://www.w3schools.com/icons/tryit.asp?filename=tryicons_fa-question-circle
Just make the line-height the same as the height of the element/pseudo-element.
line-height:1.8ex;
You can use Unicode characters to get a more concise solution. I used a question mark with Combining Enclosing Circle (U+20DD)
.infolink::before {
content: '?⃝';
display: inline-block;
margin-right: 0.25rem;
}
Here's what I need to achieve. I have a small box (button) with html content including an icon font and text.
<a class="box-locked"><span class="heading-icon-non-members"><i class="fa fa-home"></i></span>Getting Started</a>
Note that the icon class is "fa fa-home" which display a home shape icon (using font awesome) with the text bellow 'Getting Started'.
Here's the CSS for the small box:
.box-locked {
display: inline-block;
height: 170px;
width: 155px;
border: 1px solid #ddd;
text-align: center;
padding:10px;
padding-top:1rem;
padding-bottom:1rem;
padding-right:2.5rem;
padding-left:2.5rem;
font-size: 18px;
font-size: 1.2857143rem;
font-weight:700;
color:#757575;
margin-bottom: 20px;
margin-bottom: 2rem;
margin-right: 15px;
margin-right: 1.5rem;
vertical-align:top;
line-height:1.1;}
.heading-icon-non-members {
font-size: 55px;
font-size: 4rem;
color:#757575;
margin-bottom: 1rem;
text-align:center;
}
You can see the visual result here: http://awesomescreenshot.com/0bc2139r90
The goal is to display on hover another type of content. It should display a 'lock icon' with text bellow 'members only'.
I would rather prefer to do it without using a background-image because the site should be fully responsive and the box will have a full width on small screens.
You could either do it with the content property, or it might just be easier (and support older browsers) to do it with Javascript.