I have the following materials-icon package installed:
#material-ui/icons#4.9.1
I need to set the 'content' value for one of classes, in my CSS file, to the down arrow. How do I do this?
Material UI icons from #material-ui/icons#4.9.1 are exported as React components so you cannot use them in CSS.
But you have few options.
Include the material icons font and use that. More info here and here
Check the codepen
Once you have included the font in your page you can use it in CSS like this
p::after,
div::after {
content: "face";
color: blue;
}
But I dont like importing the entire fonts file just to have a single icon. So this is what I used to do.
Get the svg of the icon. Inspect the icon from material ui icons page, get the svg code and create a new svg file with the copied html and place it in your project.
Once you have the svg file, in your CSS use it like this
.download:before {
display: block;
content: ' ';
background-image: url('path-to-svg-folder/download.svg');
background-size: 24px 24px;
height: 24px;
width: 24px;
}
NB: if you dont want to have a svg file you can use the data url method and include the entire svg in your CSS file.
Related
I need help understanding how to make my code work. I'm working with MUI styling my components using a separate CSS file. I'm trying to style the following an Alert component and it doesn't work. I want to specifically style the alert icon, however, this style doesn't work.
JSX component:
<Alert severity='error' className='passwordAlert'>
Invalid Password
</Alert>
CSS component (this works):
.passwordAlert {
border-radius: 100px;
width: 80%;
margin-bottom: 0%;
margin-top: 1%;
height: 50px;
padding: 0px;
align-items: center;
}
CSS component (this is the part that doesn't work):
.passwordAlert.MuiAlert-icon {
padding-left: 5%;
}
I would like to continue using a separate file for style and I know that there are other styling methods, but is there a solution using className and a separate CSS file?
Thanks in advance.
Combining selectors won't work here as MuiAlert-icon and .passwordAlert don't occur in the same element. Write CSS for MuiAlert-icon separately.
You shouldn't create a separate file and customize MUI components. MUI has many strategies for customizing components. you can read How to customize MUI components
I'm using Bootstrap 4 and I'm trying to set padding for nav links inside navbar in my custom CSS file:
.nav-link {
padding: 0.15rem;
}
And the style that is used is this:
As you can see, the custom.css is nowhere to be seen. The css file where the current style is from is inside bootstrap.css.map.
Why is it reading the style from bootstrap.css.map and not from my custom CSS file? I bundled all styles together, the bootstrap.css is loaded first and my custom CSS is loaded last.
You need to understand how specificity is calculated in css, it is an easy topic.
If you want a quick solution, you can use !important next to your css styling like so :
td { height: 50px !important; }
Sorry, my original answer I looked at the debugger output.
If you need an overwrite. In one of my projects I gave the surrounding tag an id.
<ul id="myNavBar">
Then the following CSS worked for me
#myNavBar .link-item {
padding: 0.15rem;
}
Right now I'm making nicely formatted CSS files for our temporary WordPress site, until the new site is ready. After making a CSS style sheet and pretty HTML files, I found they didn't work in WordPress if they were inline in a post, but instead I had to put them in a separate raw HTML file (using "WP File Manager" plugin to upload them to a separate folder.) After that, the way they display on the site matched what they look like on my HDD or on my personal (LAMP) test site (using Safari 10.1.1 OS X), and if I display source in my browser it looks identical to what I uploaded.
Then I created a tooltip style with CSS following the tutorial on w3schools. In the style sheet I define "edit" as a style for changes I made to the original text
.edit { /* changes made, */
color: navy;
position: relative;
display: inline-block;
}
.edit .tooltip {
font-size: medium;
visibility: hidden;
background-color: navy;
color: white;
text-align: center;
width: 20em;
padding: 0.5em;
border-radius: 6px;
position: absolute;
z-index: 1;
}
.edit:hover .tooltip{
visibility: visible;
}
Then (per the tutorial) I add "tooltip" text inside "edit" text
<h5 class="edit">ΒΆ Then shall be said or sung the following Canticle.
<span class="tooltip">This canticle is most commonly used.</span></h5>
On my HDD and my personal site, the tooltip is invisible until I hover over it and then it pops up a balloon.
But when I load it onto WordPress, the hidden text is always visible inline, as if the "tooltip" style is ignored. To work around this bug for now (so I don't have to re-edit the HTML files), I was able to disable and hide all the tooltips by defining the tooltip style as
.edit .tooltip {
visibility: hidden;
font-size: 0%;
}
This suggests that the "tooltip" is being seen, but some aspect of the hidden part is being parsed differently on WordPress.com.
So is there some CSS style or property that WordPress could be using that causes my text to be shown? Any way to pre-emptively override this with CSS? Should I write a JavaScript that goes through and manually hides the tooltips?
Any experiments I should try to make it go away?
PS: This is different than the question at CSS Tooltip will not work on WordPress page because my text is shown inline.
You are saying:
But when I load it onto WordPress, the hidden text is always visible inline, as if the "tooltip" style is ignored.
This is an indication that the file with the styles for tooltip is loaded before other css styles are loaded. Thus files that load last override what's been loaded before.
For debugging, try adding !important to your tooltip style rules like this:
.edit .tooltip {
visibility: hidden !important;
font-size: 0%;
}
and see if that makes any changes.
Then, modify your WordPress files so that your tooltip styles are loaded last. That will allow you to remove the !important flag. (because using that flag is not a best practice and should be avoided whenever possible)
Glyphicons allows free use of its halflings icon set via Twitter Bootstrap: Bootstrap comes with two files (a .woff and a .svg) that are loaded as font files by the browser. Glyphicons also allows you to download PNGs of all the rest of its icons.
Is there a way to use bootstrap-esque classes in order to load the PNGs, or do I have to use ye old <img /> tags?
You could do something like this:
.glyphicon-envelope:before {
content: "";
width: 20px;
height: 20px;
background-image: url(envelope.png);
display: block;
}
The width and height would need to be adjusted to fit the image size correctly
In ASP.NET MVC3, how do I access the user interface icons which are included in the default package. They are located in the ~/Content/Themes/Base/Images, however, they are in an image map. An answer or link will work, just unsure of how I am supposed to integrate them and could not find an answer searching google or SO.
You'd do something like this:
.ui-icon {
width: 16px;
height: 16px;
background-image: url(images/ui-icons_469bdd_256x240.png);
}
That would be a generalized icon CSS class to indicate it as an icon and set the inheriting properties of width and height, as well as the grouped image to map icons off of. Then you'd reference each like so, using mapping:
.ui-icon-someIcon {
background-position: -32px -16px;
}
And then you could apply this to a DOM element:
<span class="ui-icon ui-icon-someIcon"></span>