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>
Related
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.
I am using a WordPress theme called Divi. This isn't a WordPress question. There are a number of provided social media icons, but I need a Soundcloud icon, and that is not provided. I'm not understanding how these icons are populating the page as they don't seem to be graphics, but rather are a font? However, I am unable to tell from the source code what is going on (inexperience).
What I'm trying to do is either add an icon of my design, or replace an existing icon. Can someone help point me in the direction if where I should be looking within my files to find the actual icons?
You can see a live site here and the icons are at the top right:
http://rattletree.com/wordpress2/
The dev code has this for the Facebook icon:
<ul class="et-social-icons">
<li class="et-social-icon et-social-facebook">
<a href="#" class="icon">
<span>Facebook</span>
</a>
</li>
</ul>
And the css has this:
.et-social-facebook a.icon:before {
content: "\e093";
}
#top-header .et-social-icon a {
font-size: 14px;
}
So that makes me think this is a font, but I don't know how or where I can edit that font? Thanks for any help!
This looks like the font pack you are using:
http://www.elegantthemes.com/blog/resources/elegant-icon-font
It doesn't look like it has an icon for soundcloud, but you could use the cloud one:
So just add this to the style sheet:
.et-social-soundcloud a.icon:before {
content: "\e002";
}
Also, here's a tutorial:
https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website
To add an icon of your design, add the following code to your stylesheet.
#top-header .et-social-icon.soundcloud a {
width: 15px;
height: 25px;
}
.soundcloud a.icon:before {
content: "";
background: url('https://placehold.it/15x25') 100% 100% no-repeat;
height: 100%;
width: 100%;
display: inline-block;
}
Make sure you create an icon, add the icon image to theme folder and update the url in the above code to point to that image.
Also add the class soundcloud to your menu in WordPress backend.
http://codepen.io/anon/pen/KwKOaz
Changing only the background-color significantly changes the style on a button element, specifically the border style.
This happens on chrome, safari, and firefox on a Mac. Why does this happen? How can I safely change its background color?
Browser vendors apply custom styling to UI elements like buttons and input fields. Altering one of these overwritten attributes results in disabling all of the other vendor styles on that element as well. If you want to change one attribute, you have to alter the others as well, I'm afraid.
Unfortunately I can't tell you why they do this - probably there is might be some spec behind, but I cannot find any evidence for that.
When all the styles are untouched, the browser uses the host OS's given API to render the given control. This will make the control look native to the platform, but if you apply any style to that control/element, the browser cannot guarantee that the given style can be applied in the given platform, so it defaults back to a simplified, fully css solution.
Also note, that styling control elements, though works, not covered by stable standards yet.
For example, the NSButton (native control behind the button in OS X) doesn't have an option to set the background color, so the browser faces an impossible task. On Windows, you can change the background color, this is why people report not seeing your issue on Windows.
Sometimes CSS styles are inherited. However, you are applying styles to your body which is everything in HTML. Personally I don't apply anything to body other than maybe reset or normalize CSS. That said, you can use CSS selector operators and\or id/classes to minimize:
http://www.w3schools.com/cssref/css_selectors.asp
Example:
html
btw don't write html like this just easier to read
<body>
<div class="wrapper">
<button class="all-btns red">
Cancel
</button>
<button class="all-btns green">
Save
</button>
</div>
</body>
css
.div.wrapper {
width: 100%;
height: auto;
background: #efefef;
}
.all-btns {
border: solid 1px #000;
width: 50px;
line-height: 48px;
height 35px;
color: #fff;
}
.btn.red {
color: #fff;
background: red;
}
.btn.green {
background: green;
}
I'm working with the designer and he sent me the following design for the search bar on our webpage:
I'm very much against using images in webpage design unless completely necessary, so I'm hoping that I can recreate the whole search bar widget in CSS. I know how to do border-radius, gradients, box-shadows, etc, so that's not a problem.
Question: Assuming CSS3 browser compatibility, how can I go about recreating the actual search button (the magnifying glass portion) with the double curved edge, and the slight drop shadow on the bottom left?
Thoughts: My initial feeling was that the search button would be circular and free-standing, then overlap the search input div with a negative left-margin, but then I was unsure how I would get that drop shadow.
Edit: I'm not completely opposed to using an image for the magnifying glass, but I've seen a similar icon created in CSS before. Would an image vs. pure CSS end up loading at the same speed, or should I do all I can do in pure CSS?
Solving the problem a different way, you could use a font to render the magnifying glass. There are some free ones here that you could load via JS or by creating an #font-face with a service like FontSquirrel. This one comes with all the necessary files to do so and it includes the magnifying glass pointing in either direction: http://www.tenbytwenty.com/sosa.php
From there, you should be able to style it with CSS to make it look the way your designer wants.
Something like this will manage
<style type="text/css">
form {
background-image: url(1noty.png);
height: 50px;
width: 240px;
}
input {
background-image: url(bg.png);
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 17px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
</style>
I'm developing a website for mobile phones (mostly Blackberry).
I can't figure out how one develops like this. Some phones don;t support CSS. If I want a button with an up and a down state, how do I do it? I'd usually make an anchor, then put the image in the background, then I could control the background position with pseudo classes link and active.
<a id="btnSearch"></a>
#btnSearch{
height: 16px;
overflow: hidden;
background-image: url(img/btnSearch.png);
}
#btnSearch:link,
#btnSearch:visited,
#btnSearch:hover{
background-position:0 0;
}
#btnSearch:active{
background-position:0 -16px;
}
but I can't do this because some mobile devices will show nothing.
Well, if they don't support CSS, then you obviously can't get button effects such as those you describe. The best you can do is provide alternate text within the anchor:
<a id="btnSearch"><span>some text</span></a>
and hide that text in browsers that do support CSS:
#btnSearch > span {
display: none;
}