I'm using Ionic2 I want to use my icons as I use Ionic Icons I've seen this link: custom ionic icons
but I Can't Follow the instruction and I can't understand what is the SVG icons, I don't want to make Icons I have Icons as images and I want to use It, can anyone help me!
You just need to change .svg to .png. Add this to your app.scss file
ion-icon {
&[class*="appname-"] {
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: currentColor;
width: 1em;
height: 1em;
}
&[class*="appname-customicon1"] {
mask-image: url(../assets/img/customicon1.png);
}
}
Uses
<ion-icon name="appname-customicon1"></ion-icon>
Credit: adjwilli.
Related
I am just getting into Material Components for the Web and I want to have a website sort of like this, although I tried the code from the docs (that is obviously not complete) and got this. How can I get something like the example?
MDC-Web provides a drawer component but not an app’s layout where this drawer can iterate with the content, so you should compose the required layout yourself. And, apart from that, you will need the sort of CSS reset to style some elements consistently across browsers. This is not an incompleteness of library, but its philosophy - to provide only Material Design components rather than “all-in-one” solution for developers. This quote is taken from one of their GitHub issues:
The goal isn't to be a framework and do a lot of little functions for
developers. It's simply to provide the Material Design Specification's
components to the web in a re-usable way. That's it. Anything that is
beyond that goes beyond the scope of what the project is trying to
achieve.
So, in the provided link from MDC-Web, you can see that there are CSS styles applied to elements like html, body and their layout. Namely, this:
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.demo-content {
display: flex;
flex: 1 1 auto;
height: 100%;
box-sizing: border-box;
}
.demo-main {
padding: 16px;
}
You can view the demo on Codepen and ask me if you need a further clarification.
What CSS3 Media Queries can we use to target Chromecast in the graphics view?
It doesn't seem to respond at all to something like:
#media tv and (device-width: 1280px){...}
The only query I have been able to get to work was:
#media(min-width: 1265px){...}
Which seems bonkers to me because the overscan is 32px anyway.
What are the best queries to use?
So far the best layout I have found is:
#media(min-width: 1265px) {
body {
position: absolute;
top: 18px;
right: 32px;
bottom: 18px;
left: 32px;
margin: 5px;
}
}
Which allows for the 18px * 32px overscan and an apparent additional 5px margin
Neil, I am not aware of a clean way to do this through Media Query at this point but you can potentially use the user agent fingerprint to discover that you are on the chromecast device; for example if strings "CrKey" and "TV" are in the user agent, then you are running on the chromecast.
I thought Safari had sorted this but it still seems to be an issue (unless I'm doing something obviously wrong).
I have a SVG placed inside an object tag. That is wrapped in a flexible containing DIV (e.g set to be width 50%). On resize, the container height resizes in Firefox, Chrome and Opera as I would expect but on Safari the container stays too high.
Here's an example on Codepen to demonstrate, switch to the full size result or 'editor on side' (button bottom right) to see the effect clearly in Safari: http://codepen.io/benfrain/full/fhyrD
Besides using JS to resize the SVG on load/resize, does anyone know if there is anything else I can do to make Safari behave correctly? Could of sworn I'd figured this out a few weeks back but now I seem to be hitting the issue again.
So, Sérgio Lopez had an answer for this. You can employ the intrinsic ratio for video technique that Thierry Koblentz described here: http://alistapart.com/article/creating-intrinsic-ratios-for-video. More info at this blog post: http://benfra.in/20l
Here is the cut and paste code you need in your CSS:
Surrounding object tag
object {
width: 100%;
display: block;
height: auto;
position: relative;
padding-top: 100%;
}
And this for the SVG inside:
svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
I am trying to put a line-height to properly align all menu items in a wordpress menu. My problem is that it works with menus that do not have an image or description, if it does have a image or description it does not align vertically with the line-height property.
Here's what I have for the menu items working:
.menu-dropdown a.level1 > span, .menu-dropdown span.level1 > span {
height: 50px;
line-height: 50px;
padding: 0 10px;
}
Now when I use Firebuf to try and fix the problem, there is a class showing a little diferent, which is "level1 parent". Even with Firebug I cannot fix this. I´m working on localhost, so can't give a link for the problem, but if it's necessary I'll put it online.
Here´s the link, you can see the problem in main menu at the top:
http://ricardo.dyndns-at-work.com:8888/yootheme/
im trying to create a basic profile for someone and am practicing using the 960 grid system.
I've since got the hang of using grids enough to position most elements, however the menu seems a little off to me, the right side seems to be bigger then the left, even though ive centered the menu itself and its at 100% width.
Does anybody have any ideas on why it is playing up?
Site url is http://digitalgenesis.com.au/sites/alice
css is http://digitalgenesis.com.au/sites/alice/css/main.css
Reduce the ".nav a:hover"-s padding. I think this is the problem.
Try the CSS like this:
.nav{margin-top: 20px;background:black; color:white; padding-top:10px; padding-bottom:10px;text-align:center; }
.nav li{display:inline; }
.nav a:hover{background:white; color:black; padding:10px 0px 10px 0px;}
.nav a{text-decoration:none; color:white; }
.footer{background:black; color:white; margin-top:20px; position:fixed; width:100%; bottom:0px;}
#top{width:100%; background:black; color:white;}
.title{font-size:26px; margin-top:45px; padding-left :10px;}
.wrapper{margin-top:50px;}
.logo{margin-left:0px;}