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;
}
Related
i'm completely a newby and clueless about coding, i tried building this landing page similar to that one that is demonstrated on this YouTube video(https://www.youtube.com/watch?v=JYWitDwHhxE) with VSC.
For some reason i've got it wrong and there are a few problems:
The headline, first paragraph(a sentence) and the menu are all at the top of the page instead of one above the other.
The main paragraph is going downwards instead of going from left to right as shown in the video.
3.The background picture is missing and the profile picture should be underneath the main paragraph.
I can't get the logic of how making the pag responsive with the different CSS functions.
Here is the code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
section{
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
background: url(bg.jpg)no-repeat;
background-size: cover;
background-position: center;
}
header{
position: relative;
top: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
header .navigation{
color: #000;
background: #fff;
text-decoration: none;
font-weight: 500;
letter-spacing: 1px;
padding: 2px 15px;
border-radius: 20px;
transition: 0.3a;
transition-property: background;
}
header .navigation a:not(:last-child){
margin-right: 30px;
}
header .navigation a:hover{
background: #fff;
}
.content{
max-width: 65px;
margin: 60px 100px;
}
.content .info h2{
color: #fff;
font-size: 55px;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 2px;
line-height: 60px;
margin-bottom: 30px;
}
.content .info p{
font-size: 16px;
font-weight: 500;
margin-bottom: 40px;
}
.media-icons{
display: flex;
justify-content: center;
align-items: center;
margin: auto;
}
.media-icons a{
position: relative;
color: #fff;
font-size: 25px;
transition: 0.3s;
transition-property: transform;
}
.media-icons a:not(:last-child){
margin-right: 60px;
}
.media-icons a:hover{
transform: scale(1.5);
}
<!DOCTYPE html>
<html land="en" dir="ltr">
<head>
<script src="https://kit.fontawesome.com/35552f1379.js" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body dir="ltr">
<section>
<input type="checkbox" id="check">
<header>
<h2 style="color: white;"><span>Welcome, I'm Boaz Kaplan</span></h2><br>
<p style="color: white;"><span>Thanks for visiting my website!</span></p><br>
<div class="navigation">
Contact
My Linkedin Page
</div>
<label for="check">
<i class="fas fa-bars menu-btn"></i>
<i class="fas fa-times close-btn"></i>
</label>
</header>
<div class="content">
<div class="info">
<p style="color: white;">A student for QA studies at INT college, experienced in the fields of customer service and sound engineering. I have good interpersonal relations, always tends to look at the "big picture", and sustains high work ethics. Looking for a first chance to prove myself in the field of quality assurance, highly motivated to learn and evolve as much as I can.</p>
<img src="תמונת פרופיל.jpg" width="106" height="69">
</div>
</div>
<div class="media-icons">
<i class="fab fa-linkedin"></i>
</div>
</section>
</body>
</html>
Appreciate your help!
As in comments, breaking it down and only addressing the simpler points. A general point is that you're trying to do an awful lot in one jump here. If you're starting out, don't do an entire complex page first. Do a simple page, so you understand what's going on, then add a little more, then a little more. If you do this, you'll allow your understanding to grow rather than giving yourself a very large amount to understand from the start.
Your first question was why the h1, para and menu are all at the top of the page. This is because you've wrapped them in a header element that has display: flex defined. The default direction for flex is row, so each block within the header is treated as equal and laid out in a row.
If you want these laid out in "normal" fashion, remove the display: flex on header, or move these blocks outside the header.
Your second question is really several different questions. As noted in the comments, the problem with your content block is simply that you've specified a max-width of 65px. The browser's done exactly what you asked for - it's just that you didn't know what you were asking! The solution here is just to remove the max-width restriction. If you don't need it, don't set it.
We can't do much about the background picture - it's not shown in your snippet because the image file isn't present within StackOverflow. However, the usual cause of the image not being shown in this sort of situation is that the path you've specified is wrong. The url needs to be the exact path to the image, relative to the css file's location. If the page is on the web then the easiest solution is often to provide the fully qualified URL (i.e. https://aaa.bbb.ccc/images/bg.jpg or whatever). If you're working on your own computer, this won't work because the image doesn't have a full URL, and you'll need to work out the path yourself. Look at your directory structure and see whether you need to go "up" before you go "across" into a new directory.
The problem with the profile pic is again probably that the path is wrong.
I hope that gives you enough to get started.
I am trying to align an icon right next to a text. I have used the :before tag but it doesn't seem to work? Is it because I am using google icons? Below is the code I want to replicate
.review {
width: 317px;
height: 25%;
}
.review h2 {
color: white;
font-style: normal;
font-weight: bold;
font-size: 30px;
line-height: 23px;
margin-left: 15px;
}
.review p {
color: white;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 16px;
text-transform: capitalize;
transition: 0.3s;
/* margin: 20px; */
}
<div class="review">
<h2>Reviews</h2>
<i class="material-icons" style="color:#FFF9F9; font-size:20px; ">check_box_outline_blank </i>
<p class="rec">Most Recent</p>
<p>Most Relevant</p>
</div>
Please google first before asking a question on SO. Just by googling your problem, I found your answer in the first link. It is another question on SO. Click here.
Just put both items inside a <div> element and use the css class display: inline-block as you can see in the example.
<div>
<i class="material-icons" style="color:#FFF9F9; font-size:20px; ">check_box_outline_blank </i>
<p style="display: inline-block" class="rec">Most Recent</p>
</div>
Sorry, Your Question is not very clear, but the use of google icons should not be an issue. My advice would be to use css grid for layout issues (since the code that you have provided is html and css).
Here is a helpful link:
https://www.w3schools.com/css/css_grid.asp
grid-column should solve your problem: have 2 columns, the first one for your image and the second one for your text. You can additionally add grid-row for better layouts
I think you want icon with links.
Put it inside the paragraph tag.
I have a drop down box with text and an inverted triangle on the right end.
I am seeing a problem on my local browsers, both firefox & chrome where the triangle is aligned towards the top. It looks like,
I am not seeing such a problem when i run the code on jsfiddle. Check here..
I am using line-height property to align vertically as,
.fa-caret-down{
line-height: 40px;
}
.btn-text{
line-height: 40px;
}
Why does my local browsers behave differently? And is there a way i can move the icon to middle?
Isn't default font line-height overriding your 40px one? Try line-height: 40px !important; and check result. If not, post screenshot from inspector with this dropdown properties shown.
I don't know why your local browser doesn't show the right design. Inside my firefox 45.0.2 everything is fine.
Are you shure, that your code is equals?
<html>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css">
<head>
<style type="text/css">
body{
background-color: #e3e4e5;
}
.drp-down-btn{
margin: 20px;
height: 40px;
background-color: #fff;
display: inline-block;
padding: 4px;
width: 150px;
}
.fa-caret-down{
line-height: 40px;
}
.btn-text{
line-height: 40px;
}
</style>
</head>
<body>
<div class="drp-down-btn">
<span class="btn-text"> My caption</span>
<i class="fa fa-lg fa-caret-down" style="vertical-align:baseline;float:right;"></i>
</div>
</body>
</html>
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..
Since I'm fairly sure this is an instance of the XY Problem I'm going to start with the Y. I have an image that's 300px wide, and I want three links underneath the image, flush against it. The last link needs to grow in size to fill the remaining space.
Now for the X. The markup I have works perfectly in Chrome and Firefox, but in IE and Safari the third link is 2px too large.
For your copy/pasting pleasure:
<head>
<style type="text/css">
.breakfast
{
text-transform: uppercase;
padding: 10px 25px;
margin: 5px -5px;
font-family: Arial, Sans-Serif;
font-size: 14px;
font-weight: bold;
background-color: #d9e021;
color: #00add0;
text-align: center;
text-decoration: none;
display: inline-block;
}
.breakfast:hover
{
text-decoration: none;
background-color: #bdc400;
color: #0198b6;
}
</style>
</head>
<body>
<div>
<img src="my_awesome_image.jpg" width="300"
height="190" alt="My awesome image." />
</div>
<div style="margin-left: 5px; margin-top: -5px;">
<a class="breakfast" href="#">BOSTON </a>
<a class="breakfast" href="#">CHICAGO </a>
<a class="breakfast" href="#" style="width: 38px;">DC </a>
</div>
</body>
Or a jsFiddle, graciously provided by Mr.Lister.
So the final link, "DC" sticks out beyond the image by 2px in Safari and IE. If I shave off 2px, it's too short in Chrome and Firefox. I also tried adding padding to the left and right of the link but same deal.
Here is another fiddle, that works in all four browsers. And opera, for good measure.
I did have to give width:290px to the container div and width:33px; float:right to the last a.
http://jsfiddle.net/MrLister/pX6S7/13/
Still not sure though why this works, while the original doesn't. Sorry. Oh, and the widths may sound random, but that is caused by the 5px and -5px margins. They do add up.
I made a fiddle for you
http://jsfiddle.net/5ve6U/3/
Dont be confused about the different width/height of your image container in this fiddle, i made it only, to see the full width with the help of a border
only resetet the body margins/padding and change your /padding/margin
.breakfast {
padding: 10px 24px;
margin: 5px -3px;
}
it works fine for me in IE