In dijit toolbar the default icon size is 16x16 px
I would like to make a toolbar with icons with size 20x20 (or bigger so it will be more comfortable for user).
I've created new icons and added them to the CSS but I'm not sure how to re size the toolbar itself to show 20x20 icons.
Here is example how I create toolbar today:
http://jsfiddle.net/D4BVT/
<div id="toolbar1" data-dojo-type="dijit/Toolbar" style="background-color:inherit;background-image:none;border-bottom:0px;">
<div data-dojo-type="dijit/form/Button" id="toolbar1.cut" data-dojo-props="iconClass:'PanIcon', showLabel:false">Cut</div>
<div data-dojo-type="dijit/form/Button" id="toolbar1.copy" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCopy', showLabel:false">Copy</div>
<div data-dojo-type="dijit/form/Button" id="toolbar1.paste" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconPaste', showLabel:false">Paste</div>
<!-- The following adds a line between toolbar sections-->
<span data-dojo-type="dijit/ToolbarSeparator"></span>
<div data-dojo-type="dijit/form/ToggleButton" id="toolbar1.bold" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconBold', showLabel:false">Bold</div>
</div>
The default icons are only 16px (height of them is 18px in CSS), if you want to use bigger icons, then you will have to create custom icon classes in CSS with these bigger icons.
For example:
.customCutIcon {
background-image: url("http://url.to/your/cut-icon.png");
width: 32px;
height: 32px;
}
And then you can use that as your iconClass in your data-dojo-props. The toolbar will automatically adapt to this new height. I also updated your JSFiddle. I used colors in this example, but you can also use icons.
Related
I'm making a site from an html5up template, and there is a part of the html that has a diamond icon class in a span that I would like to change with my png logo.
The diamond icon is not in the pictures folder nor the css so I'm not sure how I would effectively replace the image in the circle? Its as follows:
<div class="logo"> <span class="icon fa-diamond"> </span> </div>
Just wondering in which folder I would place my image, would it be the SASS code? Java?
If you need anymore information let me know.
This icon is not a image. This is font named: Font awesome. If you want to replace this icon just remove this class from span and add your img by
<span class="logo"> <img class="logo__img" src="/img/yourimg.img" alt="this is your image"><span/>
Look at your template default style.css file and check class="icon fa-diamond" styles and copy it to your img.png, but be sure that you change the font-size style to height of your image.
.logo {
/* replace this value to a value from Font Awesome icon style*/
width: 2rem;
height: 2rem;
}
.logo__img {
display: block;
width: 100%;
}
I'm building a website and I want to visually have a row of font awesome icons appear to have the same height. This also means I want them to all sit on the same baseline.
Due to the nature of the icons being different shapes with varying aspect ratios, when you place font awesome icons with the same font-size or fa-2x (etc) on the same line, their heights and baselines do not line up horizontally. In fact, I've noticed there doesn't seem to be much of a default for how the icons sit vertically in a row beside each other. Some sit above the baseline at random heights. Also at the same fa-size or font-size, the icons can visually appear to be dramatically different in size. For example the mobile-phone icon vs microphone.
The odd thing about the mobile-phone icon is how it floats above the baseline because it seems to have a built in padding that I can't seem to find a way to override. Using vertical-align:baseline etc does not help.
Here's the HTML:
<div class="some-class">
<i class="fa fa-microphone"></i><i class="fa fa-mobile-phone"></i>
<h3>TEXT</h3>
</div>
<div class="some-class">
<i class="fa fa-automobile"></i><i class="fa fa-cubes"></i>
<h3>DIFFERENT TEXT</h3>
</div>
The CSS:
.some-class {
float: left;
height: 160px;
padding: 15px;
text-align: center;
}
Anyone know of a proper way to align my font awesome icons with CSS so they appear visually to be exactly the same height when placed side by side?
Some of the glyphs size and centers are different by design from the majority (https://github.com/FortAwesome/Font-Awesome/issues/928) as you have found yourself. it might be worth to request reconsideration to the FA team.
I could align the icons in your layout though by using some css adjustments to compensate specifically for the "fa-mobile-phone". I added "fa-2x" to all icons and additionally the following css the the "fa-mobile-phone":
font-size: 42px;
top: 4px;
position: relative;
After that all the icons seem aligned vertically and all seem to have the same height. You might want to do similar adjustments in your layout.
Let's say I have a website which uses Twitter Bootstrap and has the responsive features included. In this example, I have a div with a picture in a div with span1 as the class, and some text in a div with span11 as the class. I don't want to display the image while the site is being viewed from a mobile phone. Here's the code I would use:
<div class="row-fluid">
<div class="span1 hidden-phone">
<img src="path/to/image">
</div>
<div class="span11">
<p>Here is some text</p>
</div>
</div>
From this example, the span1 div is hidden if the site is visited from a mobile phone, however the span11 div is still visible.
If I use this code, will the contents of span11 span across the entire width of the page (given that it's being viewed on a mobile phone), or will it still only span across 11 out of 12 spaces on the Bootstrap grid? If this is the case, how can I specify that I want the paragraph in span11 to span the entire width of the page and not just 11 out of 12 spaces as defined by the grid?
It will span the entire width.
The css of Bootstrap converts all elements with a span* class to block elements with 100% width for devices with screen width less than 767px; consequently, there's not really a 'grid' for mobile.
Here's the code that does this:
[class*="span"],
.uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
.row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
Source: The Bootstrap mobile layout .less file, line 60
I have a page that implements basic MS-Paint type functionality using the following palette:
When a tool is selected a grey outline is shown instead.
Currently an image of the window with the grey outlines is set as the background of the window div. The individual tools are on a single separate image:
When I begin to style the window, each tool is absolutely positioned using css of this nature:
#sketchpad_tools .tool.paintbrush {
background: url(../images/sketchpad/selected_tools.png) no-repeat -15px -80px;
top: 90px; left: 10px;
height: 100px;
width: 100px;
}
This requires me to eyeball each position, adjust the top and left properties, followed by finding the right location in the background image where the tool resides. This turns out to be a very time consuming task. If I decided to shrink the background size of the images--which I had to do on multiple occasions--the task becomes twice as long to complete.
Is there a more productive method for quickly styling this sort of functionality?
Instead of using the background image for the palette with the shadows, why not have a selected image (grey) and not selected image (colour) for each tool instead? When the tool is selected just hide the colour image and show the grey version.
If you have the images (without positioning) in a DIV with a width set to that of the palette then they should automatically wrap when the DIV width is exceeded.
See JSFiddle sample here showing how images will wrap in a DIV, just set the width of it.
Code sample you just need to add your image links in and :
<DIV style="width: 300px;">
<p>My Toolbox</p>
<img src="Tool1_Image_Location_Grey" />
<img src="Tool2_Image_Location_Color" />
<img src="Tool3_Image_Location_Color" />
<img src="Tool4_Image_Location_Color" />
<img src="Tool5_Image_Location_Color" />
</DIV>
I have a sidebar-nav as shown in the typical Twitter Bootstrap example.
Some of my sidebar menu items are long. Depending on the size of the window, the text wraps to the next line as shown in this jsfiddle as you change the width of the window. For presentation's sake, I'd like to set a minimum width for the sidebar-nav. I know there are media tags in Bootstrap's CSS, but I'm not sure that that's what I need to be doing. Basically, I want the content section to still be responsive, but have the sidebar menu to have a minimum width (or actually a locked width might be even better).
Is there a way to fix the width of the sidebarnav but make sure it still plays nicely with the content section of the page?
Get the nav out of the fluid-container, set its position to absolute and add a margin-left to the container. It's not Twitter Bootstrap's native positioning method, but it should work.
Markup:
<div class="navbar navbar-fixed-top">...</div>
<div class="the-sidebar">...</div>
<div class="container-fluid the-container>...</div>
CSS:
.the-sidebar {
position: absolute;
width: 220px;
}
.the-container {
margin-left: 240px;
}
This is the script on jsfiddle (i've used latest version of Twitter Bootstrap)
TIP:
If you want an always-visible sidebar, just change positioning to fixed