I have the following...
<!-- Works -->
<i class="fab fa-linkedin" slot="actionItems"></i>
<!-- Does not work -->
<mwc-icon-button icon="linkedin" slot="actionItems"></mwc-icon-button>
Also tried variations like...
<mwc-icon-button icon="fa-linkedin" slot="actionItems"></mwc-icon-button>
<mwc-icon-button class="fab fa-linkedin" icon="linkedin" slot="actionItems"></mwc-icon-button>
But can't get it so what is the deal?
Related
I currently am using CSS columns, to create a 2 column layout for an unordered list. Here's the code:
HTML
<div class="meta-data">
<ul>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Case Study</strong> Case Study Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Sector</strong> Sector Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Client</strong> Client Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Value</strong> Value Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Programme Duration</strong> Programme Duration Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Current Status</strong> Current Status Here </li>
</ul>
</div>
CSS
.meta-data ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
This works fine. However, if any of the li content wrap onto 2 lines or more, it throws off the 2nd column bullet points so they're not all lined up horizontally...
For example:
Case Studies: This goes onto Value: Value Here
two lines
Programme Duration: Duration here.
Sector: Sector here.
Current Status: Current Status here.
Client: Client Here
This looks messy.
I'd rather it showed as:
Case Studies: This goes onto Value: Value Here
two lines
Sector: Sector here. Programme Duration: Duration here.
Client: Client Here Current Status: Current Status here.
Is this easily possible with the CSS columns setup, or do I need to recode this a diff way?
I don't see a way to do this using column property, you can use css grid
.meta-data ul {
display:grid;
grid-template-columns: 300px 300px;
grid-column-gap:10px;
}
<div class="meta-data">
<ul>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Case Study</strong> Case Study Here Case Study HereCase Study</li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Sector</strong> Sector Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Client</strong> Client Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Value</strong> Value Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Programme Duration</strong> Programme Duration Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Current Status</strong> Current Status Here </li>
</ul>
</div>
I'm trying to make this using font-awesome stacking
I've tried two ways, but both are ugly. The problem is that fa-square and fa-square-o are different sizes, so when you stack them, they don't line up!
my fiddle
<span class="fa fa-stack">
<i class="fa fa-square fa-stack-1x"></i>
<i class="fa fa-plus-square fa-stack-1x fa-inverse"></i>
<i class="fa fa-square-o fa-stack-1x"></i>
</span>
<span class="fa fa-stack">
<i class="fa fa-square fa-stack-1x fa-inverse"></i>
<i class="fa fa-plus-square-o fa-stack-1x"></i>
</span>
The result is
I have tried to scale down the fa-square by 86% using css. However, that is very fragile, because it depends on the browser and the zoom setting. I would like the solution to look good on both Chrome and IE11 at multiple zoom levels.
This might help.
body {
background-color: tan;
font-size: 100px;
}
.fix:before {
background: #000;
border-radius: 20%;
padding: 1% 5%;
}
.fix-2:before {
background: #000;
border-radius: 20%;
padding: 1% 10%;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa fa-stack">
<i class="fa fa-square fa-stack-1x fix"></i>
<i class="fa fa-plus-square fa-stack-1x fa-inverse"></i>
</span>
<!-- Without Stacking -->
<i class="fa fa-plus-square fa-inverse fix-2"></i>
Unfortunately, if you want to use the icons of Font-Awesome, you will have to contribute to the project by making a new generation of fa-square and all the derivatives (rss-square, ...) to standardize the size of the icons.
Developers no longer accept pull-request for icons so it may take a long time before it is accepted. (As Hugues M. said, it's a known bug)
The workarounds I see:
Create your own icon based on a font (see this post), override the square unicode (f0c8) or get an other free one. (and push your solution in github). It is generic, you can dynamically change the color but it take a long time.
Or simply make an image (SVG or something else) for your project, it's quick but less malleable.
I have maybe simple problem but I really don't know what's wrong :(
http://airbyt.cz/byty Images in the divs are not loaded in all browsers except google chrome and chrome mobile. It doesn't log error in the path.
there is code.
<main>
<div class="object-byt"><h1>Modern apartment close to center with jacuzzi</h1><div class="for-img"><div class="zakryj"></div><span><i class="fa fa-2x fa-home" aria-hidden="true"></i></span><img src="img/ap-1.jpg" alt="interior"></div></div>
<div class="object-byt"><h1 class="broken">Cozy apartment in Prague</h1><div class="for-img"><div class="zakryj"></div><span><i class="fa fa-2x fa-home" aria-hidden="true"></i></span><img src="img/ap-2.jpg" alt="interior"></div></div>
<div class="object-byt"><h1>Super luxury apartment in center of Prague</h1><div class="for-img"><div class="zakryj"></div><span><i class="fa fa-2x fa-home" aria-hidden="true"></i></span><img src="img/ap-3.jpg" alt="interior"></div></div>
<div class="object-byt"><h1>Great apartment in center of Prague</h1><div class="for-img"><div class="zakryj"></div><span><i class="fa fa-2x fa-home" aria-hidden="true"></i></span><img src="img/ap-4.jpg" alt="interior"></div></div>
<div class="object-byt"><h1 class="broken">Cozy apartment in heart of Prague</h1><div class="for-img"><div class="zakryj"></div><span><i class="fa fa-2x fa-home" aria-hidden="true"></i></span><img src="img/ap-5.jpg" alt="interior"></div></div>
</main>
I will be glad for every advice. Thank you
Your image is in webp format which is only read by Chrome. You need to convert it to a regular image file. I tried http://image.online-convert.com/convert-to-jpg on one of your images and it worked. I'm sure there are many other solutions as well.
I am trying to place fa-graduation-cap inside a circle.
So, that means:
<span class="fa-stack">
<i class="fa fa-circle fa-stack-4x text-primary"></i>
<i class="fa fa-graduation-cap fa-2x"></i>
</span>
But it doesn't work. The output is this:
The graduation-cap is outside the circle. Why is that?
Note:
text-primary is the bootstrap class for color.
You're not applying those classes in the correct way/order.
Following the code from the examples, here we go.
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-graduation-cap fa-stack-1x fa-inverse"></i>
</span>
If you want it to be bigger just add a class fa-2x, fa-3x, fa-4x or fa-5x to the span, nothing else.
Check it on this fiddle.
How are you trying to put the elements together with CSS ?
you probably need to position the icons individually to place them where and how you want them. This could possibly be done with the following:
.fa-stack{position: relative;}
.fa-circle{position:absolute; top: 10px; left: 10px;}
.fa-graduation-cap{position:absolute; top: 20px; left: 10px;}
you can move the icons over the screen by changing the pixels in the top value and the left value for example.
Been wondering for a few minutes why Font awesome icons did not appear into my application, but after writing this ultra-simple fiddle, I see that they don't appear at all even with so little code.
I am just loading the CDN and inserting an icon like this:
<!-- Font awesome stylesheet -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-camera-retro fa-5x">This is a camera</i>
<i class="fa fa-icon-remove fa-2x" style="color: red;">This is an X</i>
What am I missing?
Try this:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-camera-retro fa-5x">This is a camera</i>
<i class="fa fa-remove fa-2x" style="color: red;">This is an X</i>
Here the fiddle
A couple of errors.
No fontAwesome Lib
Mistyped icon class
Solution:
Add the link below to the space provided for external resource on fiddle
//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
Then change
<i class="fa fa-icon-remove fa-2x" style="color: red;">This is an X</i>
To
<i class="fa fa-remove fa-2x" style="color: red;">This is an X</i>
Note: You don't need the word icon between fa and remove.
See it working here
If using jsfiddle you have to add the following link under external resources:
//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
Or use this in your head section:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Your jsfiddle updated.