I can't seem to get the font awesome icons to load properly. The page in question can be found here: http://thelink.biz/AboutUs/
Am I loading the font awesome correctly or is there a conflict with Bootstrap?
You have the correct styling (line-height: 30px in stylesheet.css applying to the icons using .social-links > li a), but the order that you are loading the stylesheets in the page means that it is getting overridden by the default font awesome style. Make sure that you load stylesheet.css after the font awesome css files in your header.
I can see that you placed google analytics code wrogly at the top of the html file. Please place the code at the bottom of the html file & of course inside body tags.
Your <a> tags need some padding to push down the FontAwesome icons.
I was able to add
padding-top:7px
to the <a> and it fixed the centering of the icons.
Related
Can anyone explane if it is possible to use font-awesome or another big icon font with Element UI? I've seen FAQ but cannot make it work for me.
https://github.com/ElemeFE/element/blob/dev/FAQ.md
Thanks.
You can just include those libraries / or NPM them and they work, Element UI has a limited set of icons so I have include vue-awesome (font awesome) but I notice the position of the icons if out a bit so you need some CSS to adjust top margins (I needed -4px) and line them with say button text.
Is there a way to change the width from the grid container in bootstrap theme using IP or should i hack the CSS style sheet?
Can't understand why would you need this. Do you want to have GRID management narrower? Then add your own css file.
CSS can be added using ipAddCss function in ipBeforeController event.
You can add CSS only for particular admin pages. Use ipRoute()->... to get information about current page.
Using phantom JS 1.9.7 I am having issues printing my webpage to PDF.
Instead of matching the page exactly, background colors and images are stripped, as per:
How can I force browsers to print background images in CSS?
Thanks to a post on another question, here is the answer:
body {
-webkit-print-color-adjust: exact;
}
You can add the CSS style "-webkit-print-color-adjust: exact;" to the element to force print the background color and/or image.
See the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust
Odd how this is on MDN.
I have this requirement where I have to change the default styles on my Ext JS application. I am not talking about changing stuff in CSS files yet. I am not that ambitious yet. Here is what I am looking for:
Suppose I need a Submit and Cancel buttons, I use xtype:button and text:Save ( or Cancel ). This will render buttons with the text on them. What should I do if I want to change the look and feel of the button? Or replace the button with a cool Save or Cancel image?
Right now I have all the texts on the application with the default font that ExtJS shows. What am I supposed to do if I want all the text on the application changed to a different font? Everything right from the data in forms/grids and the titles of each component should be changed to some other font my customer prefers. What am I supposed to do?
I understand these are very basic and a generic questions, but I am looking for a good headsup before I proceed with my task.
Thank you all in advance. Waiting for answers :)
Update: So, I found out how we deal with CSS and change the fonts. Can anyone help about the Chaning the look and feel for Submit/Cancel buttons.
I recommend you to use SASS and compass to build your own themes, or better said to change one the existing themes. In the Ext JS documentation you can find the css variables which you can set according to your needs.
If you are not ready for theming with SASS just yet take a look at this example of button configs from the sencha docs:
Stanadalone Example page: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.html
CSS that adds customized images to the buttons: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.css
JS that shows button configs: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.js
Essentially this shows how to use iconCls property on the button config along with a simple CSS class to add desired image to your button.
I can't figure out why my background images in my absolutely positioned divs aren't displaying. I'm using firefox, but also in Chrome.
Pariticularly odd is that when viewing the page with the web developer toolbar's Edit CSS dialogue open, the images appear.
The images in question are a div with an id of "joel-image" and the nav items.
http://joelglovier.com
The paths in css are relative to the actual css file .. not the html page..
so your path should either be ../img/joel-image.jpg or better /img/joel-image.jpg
Currently your css file is in /css folder, so the background image property of url(img/joel-image.jpg) translates to /css/img/joel-image.jpg which is wrong ..
The request the browser is making to the image, is returning a 404. So the path to your image is wrong. Double check it. Try an absolute path.