h1 and h2 classes not showing up in Internet Explorer - html
I'm having trouble getting the h1 and h2 tags to display at all in Internet Explorer. I looked at the CSS file but still couldn't see why it wouldn't work with IE9.
Here is the CSS code for the headers that are not showing up in IE:
.person h1
{
color: #475261;
font-size: 48px;
font-weight: 400;
letter-spacing: -1px;
margin-left: -60px;
}
.item h2
{
color: #06A;
font-family: Georgia, serif;
font-size: 22px;
font-weight: 400;
letter-spacing: -1px;
}
.item h2 a
{
color: #06A;
text-decoration: none;
}
Link: http://ItsNotch.com/experience
Cause of Problem
It appears that the h1 elements are being replaced by canvas elements by the cufon-yui.js script. According to this FAQ, it is known to not work in IE 9 Beta.
First Solution
However, they state there is a fix for it in their version 1.09i available at their official site.
Second Solution
If you look at item 8 of the FAQ, they say that if you don't want to update your js file, you can try some other code:
<!--[if gte IE 9]>
<script type="text/javascript">
Cufon.set('engine', 'canvas');
</script>
<![endif]-->
Read the FAQ for further instructions. I'm not sure if it will work though, just a warning.
Third Solution
You may also be interested in trying Typekit instead, which according to the cufon main site, also has the advantage of the text being selectable, which it currently isn't using cufon:
You might also want to take this
opportunity to try Typekit, a hosted,
#font-face-based alternative. Yes,
that means they support text
selection. It's the easiest way to
embrace standards.
Fourth Solution
You also always have the option of just not using one of these JavaScript-injected special fonts at all.
Replace cufon.js with the code given below, and problem solved.
/*
* Copyright (c) 2009 Simo Kinnunen.
* Licensed under the MIT license.
*
* #version 1.09i
*/
var Cufon=(function(){var m=function(){return m.replace.apply(null,arguments)};var x=m.DOM={ready:(function(){var C=false,E={loaded:1,complete:1};var B=[],D=function(){if(C){return}C=true;for(var F;F=B.shift();F()){}};if(document.addEventListener){document.addEventListener("DOMContentLoaded",D,false);window.addEventListener("pageshow",D,false)}if(!window.opera&&document.readyState){(function(){E[document.readyState]?D():setTimeout(arguments.callee,10)})()}if(document.readyState&&document.createStyleSheet){(function(){try{document.body.doScroll("left");D()}catch(F){setTimeout(arguments.callee,1)}})()}q(window,"load",D);return function(F){if(!arguments.length){D()}else{C?F():B.push(F)}}})(),root:function(){return document.documentElement||document.body}};var n=m.CSS={Size:function(C,B){this.value=parseFloat(C);this.unit=String(C).match(/[a-z%]*$/)[0]||"px";this.convert=function(D){return D/B*this.value};this.convertFrom=function(D){return D/this.value*B};this.toString=function(){return this.value+this.unit}},addClass:function(C,B){var D=C.className;C.className=D+(D&&" ")+B;return C},color:j(function(C){var B={};B.color=C.replace(/^rgba\((.*?),\s*([\d.]+)\)/,function(E,D,F){B.opacity=parseFloat(F);return"rgb("+D+")"});return B}),fontStretch:j(function(B){if(typeof B=="number"){return B}if(/%$/.test(B)){return parseFloat(B)/100}return{"ultra-condensed":0.5,"extra-condensed":0.625,condensed:0.75,"semi-condensed":0.875,"semi-expanded":1.125,expanded:1.25,"extra-expanded":1.5,"ultra-expanded":2}[B]||1}),getStyle:function(C){var B=document.defaultView;if(B&&B.getComputedStyle){return new a(B.getComputedStyle(C,null))}if(C.currentStyle){return new a(C.currentStyle)}return new a(C.style)},gradient:j(function(F){var G={id:F,type:F.match(/^-([a-z]+)-gradient\(/)[1],stops:[]},C=F.substr(F.indexOf("(")).match(/([\d.]+=)?(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)/ig);for(var E=0,B=C.length,D;E<B;++E){D=C[E].split("=",2).reverse();G.stops.push([D[1]||E/(B-1),D[0]])}return G}),quotedList:j(function(E){var D=[],C=/\s*((["'])([\s\S]*?[^\\])\2|[^,]+)\s*/g,B;while(B=C.exec(E)){D.push(B[3]||B[1])}return D}),recognizesMedia:j(function(G){var E=document.createElement("style"),D,C,B;E.type="text/css";E.media=G;try{E.appendChild(document.createTextNode("/**/"))}catch(F){}C=g("head")[0];C.insertBefore(E,C.firstChild);D=(E.sheet||E.styleSheet);B=D&&!D.disabled;C.removeChild(E);return B}),removeClass:function(D,C){var B=RegExp("(?:^|\\s+)"+C+"(?=\\s|$)","g");D.className=D.className.replace(B,"");return D},supports:function(D,C){var B=document.createElement("span").style;if(B[D]===undefined){return false}B[D]=C;return B[D]===C},textAlign:function(E,D,B,C){if(D.get("textAlign")=="right"){if(B>0){E=" "+E}}else{if(B<C-1){E+=" "}}return E},textShadow:j(function(F){if(F=="none"){return null}var E=[],G={},B,C=0;var D=/(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)|(-?[\d.]+[a-z%]*)|,/ig;while(B=D.exec(F)){if(B[0]==","){E.push(G);G={};C=0}else{if(B[1]){G.color=B[1]}else{G[["offX","offY","blur"][C++]]=B[2]}}}E.push(G);return E}),textTransform:(function(){var B={uppercase:function(C){return C.toUpperCase()},lowercase:function(C){return C.toLowerCase()},capitalize:function(C){return C.replace(/\b./g,function(D){return D.toUpperCase()})}};return function(E,D){var C=B[D.get("textTransform")];return C?C(E):E}})(),whiteSpace:(function(){var D={inline:1,"inline-block":1,"run-in":1};var C=/^\s+/,B=/\s+$/;return function(H,F,G,E){if(E){if(E.nodeName.toLowerCase()=="br"){H=H.replace(C,"")}}if(D[F.get("display")]){return H}if(!G.previousSibling){H=H.replace(C,"")}if(!G.nextSibling){H=H.replace(B,"")}return H}})()};n.ready=(function(){var B=!n.recognizesMedia("all"),E=false;var D=[],H=function(){B=true;for(var K;K=D.shift();K()){}};var I=g("link"),J=g("style");function C(K){return K.disabled||G(K.sheet,K.media||"screen")}function G(M,P){if(!n.recognizesMedia(P||"all")){return true}if(!M||M.disabled){return false}try{var Q=M.cssRules,O;if(Q){search:for(var L=0,K=Q.length;O=Q[L],L<K;++L){switch(O.type){case 2:break;case 3:if(!G(O.styleSheet,O.media.mediaText)){return false}break;default:break search}}}}catch(N){}return true}function F(){if(document.createStyleSheet){return true}var L,K;for(K=0;L=I[K];++K){if(L.rel.toLowerCase()=="stylesheet"&&!C(L)){return false}}for(K=0;L=J[K];++K){if(!C(L)){return false}}return true}x.ready(function(){if(!E){E=n.getStyle(document.body).isUsable()}if(B||(E&&F())){H()}else{setTimeout(arguments.callee,10)}});return function(K){if(B){K()}else{D.push(K)}}})();function s(D){var C=this.face=D.face,B={"\u0020":1,"\u00a0":1,"\u3000":1};this.glyphs=D.glyphs;this.w=D.w;this.baseSize=parseInt(C["units-per-em"],10);this.family=C["font-family"].toLowerCase();this.weight=C["font-weight"];this.style=C["font-style"]||"normal";this.viewBox=(function(){var F=C.bbox.split(/\s+/);var E={minX:parseInt(F[0],10),minY:parseInt(F[1],10),maxX:parseInt(F[2],10),maxY:parseInt(F[3],10)};E.width=E.maxX-E.minX;E.height=E.maxY-E.minY;E.toString=function(){return[this.minX,this.minY,this.width,this.height].join(" ")};return E})();this.ascent=-parseInt(C.ascent,10);this.descent=-parseInt(C.descent,10);this.height=-this.ascent+this.descent;this.spacing=function(L,N,E){var O=this.glyphs,M,K,G,P=[],F=0,J=-1,I=-1,H;while(H=L[++J]){M=O[H]||this.missingGlyph;if(!M){continue}if(K){F-=G=K[H]||0;P[I]-=G}F+=P[++I]=~~(M.w||this.w)+N+(B[H]?E:0);K=M.k}P.total=F;return P}}function f(){var C={},B={oblique:"italic",italic:"oblique"};this.add=function(D){(C[D.style]||(C[D.style]={}))[D.weight]=D};this.get=function(H,I){var G=C[H]||C[B[H]]||C.normal||C.italic||C.oblique;if(!G){return null}I={normal:400,bold:700}[I]||parseInt(I,10);if(G[I]){return G[I]}var E={1:1,99:0}[I%100],K=[],F,D;if(E===undefined){E=I>400}if(I==500){I=400}for(var J in G){if(!k(G,J)){continue}J=parseInt(J,10);if(!F||J<F){F=J}if(!D||J>D){D=J}K.push(J)}if(I<F){I=F}if(I>D){I=D}K.sort(function(M,L){return(E?(M>=I&&L>=I)?M<L:M>L:(M<=I&&L<=I)?M>L:M<L)?-1:1});return G[K[0]]}}function r(){function D(F,G){if(F.contains){return F.contains(G)}return F.compareDocumentPosition(G)&16}function B(G){var F=G.relatedTarget;if(!F||D(this,F)){return}C(this,G.type=="mouseover")}function E(F){C(this,F.type=="mouseenter")}function C(F,G){setTimeout(function(){var H=d.get(F).options;m.replace(F,G?h(H,H.hover):H,true)},10)}this.attach=function(F){if(F.onmouseenter===undefined){q(F,"mouseover",B);q(F,"mouseout",B)}else{q(F,"mouseenter",E);q(F,"mouseleave",E)}}}function u(){var C=[],D={};function B(H){var E=[],G;for(var F=0;G=H[F];++F){E[F]=C[D[G]]}return E}this.add=function(F,E){D[F]=C.push(E)-1};this.repeat=function(){var E=arguments.length?B(arguments):C,F;for(var G=0;F=E[G++];){m.replace(F[0],F[1],true)}}}function A(){var D={},B=0;function C(E){return E.cufid||(E.cufid=++B)}this.get=function(E){var F=C(E);return D[F]||(D[F]={})}}function a(B){var D={},C={};this.extend=function(E){for(var F in E){if(k(E,F)){D[F]=E[F]}}return this};this.get=function(E){return D[E]!=undefined?D[E]:B[E]};this.getSize=function(F,E){return C[F]||(C[F]=new n.Size(this.get(F),E))};this.isUsable=function(){return !!B}}function q(C,B,D){if(C.addEventListener){C.addEventListener(B,D,false)}else{if(C.attachEvent){C.attachEvent("on"+B,function(){return D.call(C,window.event)})}}}function v(C,B){var D=d.get(C);if(D.options){return C}if(B.hover&&B.hoverables[C.nodeName.toLowerCase()]){b.attach(C)}D.options=B;return C}function j(B){var C={};return function(D){if(!k(C,D)){C[D]=B.apply(null,arguments)}return C[D]}}function c(F,E){var B=n.quotedList(E.get("fontFamily").toLowerCase()),D;for(var C=0;D=B[C];++C){if(i[D]){return i[D].get(E.get("fontStyle"),E.get("fontWeight"))}}return null}function g(B){return document.getElementsByTagName(B)}function k(C,B){return C.hasOwnProperty(B)}function h(){var C={},B,F;for(var E=0,D=arguments.length;B=arguments[E],E<D;++E){for(F in B){if(k(B,F)){C[F]=B[F]}}}return C}function o(E,M,C,N,F,D){var K=document.createDocumentFragment(),H;if(M===""){return K}var L=N.separate;var I=M.split(p[L]),B=(L=="words");if(B&&t){if(/^\s/.test(M)){I.unshift("")}if(/\s$/.test(M)){I.push("")}}for(var J=0,G=I.length;J<G;++J){H=z[N.engine](E,B?n.textAlign(I[J],C,J,G):I[J],C,N,F,D,J<G-1);if(H){K.appendChild(H)}}return K}function l(D,M){var C=D.nodeName.toLowerCase();if(M.ignore[C]){return}var E=!M.textless[C];var B=n.getStyle(v(D,M)).extend(M);var F=c(D,B),G,K,I,H,L,J;if(!F){return}for(G=D.firstChild;G;G=I){K=G.nodeType;I=G.nextSibling;if(E&&K==3){if(H){H.appendData(G.data);D.removeChild(G)}else{H=G}if(I){continue}}if(H){D.replaceChild(o(F,n.whiteSpace(H.data,B,H,J),B,M,G,D),H);H=null}if(K==1){if(G.firstChild){if(G.nodeName.toLowerCase()=="cufon"){z[M.engine](F,null,B,M,G,D)}else{arguments.callee(G,M)}}J=G}}}var t=" ".split(/\s+/).length==0;var d=new A();var b=new r();var y=new u();var e=false;var z={},i={},w={autoDetect:false,engine:null,forceHitArea:false,hover:false,hoverables:{a:true},ignore:{applet:1,canvas:1,col:1,colgroup:1,head:1,iframe:1,map:1,optgroup:1,option:1,script:1,select:1,style:1,textarea:1,title:1,pre:1},printable:true,selector:(window.Sizzle||(window.jQuery&&function(B){return jQuery(B)})||(window.dojo&&dojo.query)||(window.Ext&&Ext.query)||(window.YAHOO&&YAHOO.util&&YAHOO.util.Selector&&YAHOO.util.Selector.query)||(window.$$&&function(B){return $$(B)})||(window.$&&function(B){return $(B)})||(document.querySelectorAll&&function(B){return document.querySelectorAll(B)})||g),separate:"words",textless:{dl:1,html:1,ol:1,table:1,tbody:1,thead:1,tfoot:1,tr:1,ul:1},textShadow:"none"};var p={words:/\s/.test("\u00a0")?/[^\S\u00a0]+/:/\s+/,characters:"",none:/^/};m.now=function(){x.ready();return m};m.refresh=function(){y.repeat.apply(y,arguments);return m};m.registerEngine=function(C,B){if(!B){return m}z[C]=B;return m.set("engine",C)};m.registerFont=function(D){if(!D){return m}var B=new s(D),C=B.family;if(!i[C]){i[C]=new f()}i[C].add(B);return m.set("fontFamily",'"'+C+'"')};m.replace=function(D,C,B){C=h(w,C);if(!C.engine){return m}if(!e){n.addClass(x.root(),"cufon-active cufon-loading");n.ready(function(){n.addClass(n.removeClass(x.root(),"cufon-loading"),"cufon-ready")});e=true}if(C.hover){C.forceHitArea=true}if(C.autoDetect){delete C.fontFamily}if(typeof C.textShadow=="string"){C.textShadow=n.textShadow(C.textShadow)}if(typeof C.color=="string"&&/^-/.test(C.color)){C.textGradient=n.gradient(C.color)}else{delete C.textGradient}if(!B){y.add(D,arguments)}if(D.nodeType||typeof D=="string"){D=[D]}n.ready(function(){for(var F=0,E=D.length;F<E;++F){var G=D[F];if(typeof G=="string"){m.replace(C.selector(G),C,true)}else{l(G,C)}}});return m};m.set=function(B,C){w[B]=C;return m};return m})();Cufon.registerEngine("vml",(function(){var e=document.namespaces;if(!e){return}e.add("cvml","urn:schemas-microsoft-com:vml");e=null;var b=document.createElement("cvml:shape");b.style.behavior="url(#default#VML)";if(!b.coordsize){return}b=null;var h=(document.documentMode||0)<8;document.write(('<style type="text/css">cufoncanvas{text-indent:0;}#media screen{cvml\\:shape,cvml\\:rect,cvml\\:fill,cvml\\:shadow{behavior:url(#default#VML);display:block;antialias:true;position:absolute;}cufoncanvas{position:absolute;text-align:left;}cufon{display:inline-block;position:relative;vertical-align:'+(h?"middle":"text-bottom")+";}cufon cufontext{position:absolute;left:-10000in;font-size:1px;}a cufon{cursor:pointer}}#media print{cufon cufoncanvas{display:none;}}</style>").replace(/;/g,"!important;"));function c(i,j){return a(i,/(?:em|ex|%)$|^[a-z-]+$/i.test(j)?"1em":j)}function a(l,m){if(m==="0"){return 0}if(/px$/i.test(m)){return parseFloat(m)}var k=l.style.left,j=l.runtimeStyle.left;l.runtimeStyle.left=l.currentStyle.left;l.style.left=m.replace("%","em");var i=l.style.pixelLeft;l.style.left=k;l.runtimeStyle.left=j;return i}function f(l,k,j,n){var i="computed"+n,m=k[i];if(isNaN(m)){m=k.get(n);k[i]=m=(m=="normal")?0:~~j.convertFrom(a(l,m))}return m}var g={};function d(p){var q=p.id;if(!g[q]){var n=p.stops,o=document.createElement("cvml:fill"),i=[];o.type="gradient";o.angle=180;o.focus="0";o.method="sigma";o.color=n[0][1];for(var m=1,l=n.length-1;m<l;++m){i.push(n[m][0]*100+"% "+n[m][1])}o.colors=i.join(",");o.color2=n[l][1];g[q]=o}return g[q]}return function(ac,G,Y,C,K,ad,W){var n=(G===null);if(n){G=K.alt}var I=ac.viewBox;var p=Y.computedFontSize||(Y.computedFontSize=new Cufon.CSS.Size(c(ad,Y.get("fontSize"))+"px",ac.baseSize));var y,q;if(n){y=K;q=K.firstChild}else{y=document.createElement("cufon");y.className="cufon cufon-vml";y.alt=G;q=document.createElement("cufoncanvas");y.appendChild(q);if(C.printable){var Z=document.createElement("cufontext");Z.appendChild(document.createTextNode(G));y.appendChild(Z)}if(!W){y.appendChild(document.createElement("cvml:shape"))}}var ai=y.style;var R=q.style;var l=p.convert(I.height),af=Math.ceil(l);var V=af/l;var P=V*Cufon.CSS.fontStretch(Y.get("fontStretch"));var U=I.minX,T=I.minY;R.height=af;R.top=Math.round(p.convert(T-ac.ascent));R.left=Math.round(p.convert(U));ai.height=p.convert(ac.height)+"px";var F=Y.get("color");var ag=Cufon.CSS.textTransform(G,Y).split("");var L=ac.spacing(ag,f(ad,Y,p,"letterSpacing"),f(ad,Y,p,"wordSpacing"));if(!L.length){return null}var k=L.total;var x=-U+k+(I.width-L[L.length-1]);var ah=p.convert(x*P),X=Math.round(ah);var O=x+","+I.height,m;var J="r"+O+"ns";var u=C.textGradient&&d(C.textGradient);var o=ac.glyphs,S=0;var H=C.textShadow;var ab=-1,aa=0,w;while(w=ag[++ab]){var D=o[ag[ab]]||ac.missingGlyph,v;if(!D){continue}if(n){v=q.childNodes[aa];while(v.firstChild){v.removeChild(v.firstChild)}}else{v=document.createElement("cvml:shape");q.appendChild(v)}v.stroked="f";v.coordsize=O;v.coordorigin=m=(U-S)+","+T;v.path=(D.d?"m"+D.d+"xe":"")+"m"+m+J;v.fillcolor=F;if(u){v.appendChild(u.cloneNode(false))}var ae=v.style;ae.width=X;ae.height=af;if(H){var s=H[0],r=H[1];var B=Cufon.CSS.color(s.color),z;var N=document.createElement("cvml:shadow");N.on="t";N.color=B.color;N.offset=s.offX+","+s.offY;if(r){z=Cufon.CSS.color(r.color);N.type="double";N.color2=z.color;N.offset2=r.offX+","+r.offY}N.opacity=B.opacity||(z&&z.opacity)||1;v.appendChild(N)}S+=L[aa++]}var M=v.nextSibling,t,A;if(C.forceHitArea){if(!M){M=document.createElement("cvml:rect");M.stroked="f";M.className="cufon-vml-cover";t=document.createElement("cvml:fill");t.opacity=0;M.appendChild(t);q.appendChild(M)}A=M.style;A.width=X;A.height=af}else{if(M){q.removeChild(M)}}ai.width=Math.max(Math.ceil(p.convert(k*P)),0);if(h){var Q=Y.computedYAdjust;if(Q===undefined){var E=Y.get("lineHeight");if(E=="normal"){E="1em"}else{if(!isNaN(E)){E+="em"}}Y.computedYAdjust=Q=0.5*(a(ad,E)-parseFloat(ai.height))}if(Q){ai.marginTop=Math.ceil(Q)+"px";ai.marginBottom=Q+"px"}}return y}})());Cufon.registerEngine("canvas",(function(){var b=document.createElement("canvas");if(!b||!b.getContext||!b.getContext.apply){return}b=null;var a=Cufon.CSS.supports("display","inline-block");var e=!a&&(document.compatMode=="BackCompat"||/frameset|transitional/i.test(document.doctype.publicId));var f=document.createElement("style");f.type="text/css";f.appendChild(document.createTextNode(("cufon{text-indent:0;}#media screen,projection{cufon{display:inline;display:inline-block;position:relative;vertical-align:middle;"+(e?"":"font-size:1px;line-height:1px;")+"}cufon cufontext{display:-moz-inline-box;display:inline-block;width:0;height:0;overflow:hidden;text-indent:-10000in;}"+(a?"cufon canvas{position:relative;}":"cufon canvas{position:absolute;}")+"}#media print{cufon{padding:0;}cufon canvas{display:none;}}").replace(/;/g,"!important;")));document.getElementsByTagName("head")[0].appendChild(f);function d(p,h){var n=0,m=0;var g=[],o=/([mrvxe])([^a-z]*)/g,k;generate:for(var j=0;k=o.exec(p);++j){var l=k[2].split(",");switch(k[1]){case"v":g[j]={m:"bezierCurveTo",a:[n+~~l[0],m+~~l[1],n+~~l[2],m+~~l[3],n+=~~l[4],m+=~~l[5]]};break;case"r":g[j]={m:"lineTo",a:[n+=~~l[0],m+=~~l[1]]};break;case"m":g[j]={m:"moveTo",a:[n=~~l[0],m=~~l[1]]};break;case"x":g[j]={m:"closePath"};break;case"e":break generate}h[g[j].m].apply(h,g[j].a)}return g}function c(m,k){for(var j=0,h=m.length;j<h;++j){var g=m[j];k[g.m].apply(k,g.a)}}return function(V,w,P,t,C,W){var k=(w===null);if(k){w=C.getAttribute("alt")}var A=V.viewBox;var m=P.getSize("fontSize",V.baseSize);var B=0,O=0,N=0,u=0;var z=t.textShadow,L=[];if(z){for(var U=z.length;U--;){var F=z[U];var K=m.convertFrom(parseFloat(F.offX));var I=m.convertFrom(parseFloat(F.offY));L[U]=[K,I];if(I<B){B=I}if(K>O){O=K}if(I>N){N=I}if(K<u){u=K}}}var Z=Cufon.CSS.textTransform(w,P).split("");var E=V.spacing(Z,~~m.convertFrom(parseFloat(P.get("letterSpacing"))||0),~~m.convertFrom(parseFloat(P.get("wordSpacing"))||0));if(!E.length){return null}var h=E.total;O+=A.width-E[E.length-1];u+=A.minX;var s,n;if(k){s=C;n=C.firstChild}else{s=document.createElement("cufon");s.className="cufon cufon-canvas";s.setAttribute("alt",w);n=document.createElement("canvas");s.appendChild(n);if(t.printable){var S=document.createElement("cufontext");S.appendChild(document.createTextNode(w));s.appendChild(S)}}var aa=s.style;var H=n.style;var j=m.convert(A.height);var Y=Math.ceil(j);var M=Y/j;var G=M*Cufon.CSS.fontStretch(P.get("fontStretch"));var J=h*G;var Q=Math.ceil(m.convert(J+O-u));var o=Math.ceil(m.convert(A.height-B+N));n.width=Q;n.height=o;H.width=Q+"px";H.height=o+"px";B+=A.minY;H.top=Math.round(m.convert(B-V.ascent))+"px";H.left=Math.round(m.convert(u))+"px";var r=Math.max(Math.ceil(m.convert(J)),0)+"px";if(a){aa.width=r;aa.height=m.convert(V.height)+"px"}else{aa.paddingLeft=r;aa.paddingBottom=(m.convert(V.height)-1)+"px"}var X=n.getContext("2d"),D=j/A.height;X.scale(D,D*M);X.translate(-u,-B);X.save();function T(){var x=V.glyphs,ab,l=-1,g=-1,y;X.scale(G,1);while(y=Z[++l]){var ab=x[Z[l]]||V.missingGlyph;if(!ab){continue}if(ab.d){X.beginPath();if(ab.code){c(ab.code,X)}else{ab.code=d("m"+ab.d,X)}X.fill()}X.translate(E[++g],0)}X.restore()}if(z){for(var U=z.length;U--;){var F=z[U];X.save();X.fillStyle=F.color;X.translate.apply(X,L[U]);T()}}var q=t.textGradient;if(q){var v=q.stops,p=X.createLinearGradient(0,A.minY,0,A.maxY);for(var U=0,R=v.length;U<R;++U){p.addColorStop.apply(p,v[U])}X.fillStyle=p}else{X.fillStyle=P.get("color")}T();return s}})());
Related
How do I view country flags on Windows 10 through HTML?
Is there a work around to make country flag emoji visible on windows 10 through HTML? <!DOCTYPE html> <html> <style> body { font-size: 40px; } </style> <body> <p>9983 will display ⛿</p> <p>How to display American or Japanese flags?</p> <p>🇺🇸 is just letters on Windows 10 😓</p> </body> </html> I found this on https://mdbootstrap.com/docs/jquery/content/flag/ I don't see a flag emoji on https://www.w3schools.com/charsets/ref_emoji.asp I can view them on https://www.emojicopy.com/ but cannot use. I found a CSS flag on https://github.com/pixelastic/css-flags/blob/master/app/styles/_flags/usa.scss I'm still learning to use stackOverflow, and I'm new at coding. This is my fourth try at this question.
Use Noto Color Emoji font. First, write a #font-face rule with the unicode-range property. Then add the font to the top of your font stack: (Source) #font-face { font-family: NotoColorEmojiLimited; unicode-range: U+1F1E6-1F1FF; src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf); } div { font-family: 'NotoColorEmojiLimited', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; } <div> <p> 🇦🇫 🇦🇱 🇩🇿 🇦🇩 🇦🇴 🇦🇬 🇦🇷 🇦🇲 🇦🇺 🇦🇹 🇦🇿 🇧🇸 🇧🇭 🇧🇩 🇧🇧 🇧🇾 🇧🇪 🇧🇿 🇧🇯 🇧🇹 🇧🇴 🇧🇦 🇧🇼 🇧🇷 🇧🇳 🇧🇬 🇧🇫 🇧🇮 🇨🇻 🇰🇭 🇨🇲 🇨🇦 🇨🇫 🇹🇩 🇨🇱 🇨🇴 🇰🇲 🇨🇩 🇨🇷 🇨🇮 🇭🇷 🇨🇺 🇨🇾 🇨🇿 🇰🇵 🇨🇬 🇩🇰 🇩🇯 🇩🇲 🇩🇴 🇪🇨 🇪🇬 🇸🇻 🇬🇶 🇪🇷 🇪🇪 🇸🇿 🇪🇹 🇫🇯 🇫🇮 🇫🇷 🇬🇦 🇬🇲 🇬🇪 🇩🇪 🇬🇭 🇬🇷 🇬🇩 🇬🇹 🇬🇳 🇬🇼 🇬🇾 🇭🇹 🇭🇳 🇭🇺 🇮🇸 🇮🇳 🇮🇩 🇮🇷 🇮🇶 🇮🇪 🇮🇱 🇮🇹 🇯🇲 🇯🇵 🇯🇴 🇰🇿 🇰🇪 🇰🇮 🇰🇼 🇰🇬 🇱🇦 🇱🇻 🇱🇧 🇱🇸 🇱🇷 🇱🇾 🇱🇮 🇱🇹 🇱🇺 🇲🇬 🇲🇼 🇲🇾 🇲🇻 🇲🇱 🇲🇹 🇲🇭 🇲🇷 🇲🇺 🇲🇽 🇫🇲 🇲🇨 🇲🇳 🇲🇪 🇲🇦 🇲🇿 🇲🇲 🇳🇦 🇳🇷 🇳🇵 🇳🇱 🇳🇿 🇳🇮 🇳🇪 🇳🇬 🇲🇰 🇳🇴 🇴🇲 🇵🇰 🇵🇼 🇵🇦 🇵🇬 🇵🇾 🇵🇪 🇵🇭 🇵🇱 🇵🇹 🇶🇦 🇰🇷 🇲🇩 🇷🇴 🇷🇺 🇷🇼 🇰🇳 🇱🇨 🇻🇨 🇼🇸 🇸🇲 🇸🇹 🇸🇦 🇸🇳 🇷🇸 🇸🇨 🇸🇱 🇸🇬 🇸🇰 🇸🇮 🇸🇧 🇸🇴 🇿🇦 🇸🇸 🇪🇸 🇱🇰 🇸🇩 🇸🇷 🇸🇪 🇨🇭 🇸🇾 🇹🇯 🇹🇭 🇹🇱 🇹🇬 🇹🇴 🇹🇹 🇹🇳 🇹🇷 🇹🇲 🇹🇻 🇺🇬 🇺🇦 🇦🇪 🇬🇧 🇹🇿 🇺🇸 🇺🇾 🇺🇿 🇻🇺 🇻🇪 🇻🇳 🇾🇪 🇿🇲 🇿🇼 </p> <p> Noto Color Emoji abcdefghijklmnopqrstuvwxyz0123456789 </p> </div>
Flags don't seem to work on Windows due to political reasons, see https://answers.microsoft.com/en-us/windows/forum/all/flag-emoji/85b163bc-786a-4918-9042-763ccf4b6c05?page=1 This thread seems to have found a workaround Flag Emojis not rendering
Windows includes the Segoe UI Emoji font, but it does not support flags. To see flag emoji on Windows 10, you'll have to provide a custom emoji font that does support flags. There's an ISO standard with two-letter codes for countries, like "JP" for Japan. In Unicode, the emoji flags are encoded as a pair of special characters that correspond to "A" to "Z", but that are different characters from A-Z. You can see the different sequences at https://unicode.org/emoji/charts/full-emoji-list.html#country-flag. For example, for the Japanese flag the sequence U+1F1EF U+1F1F5 is used. To encode those in a Web page, you can use character entities 🇯🇵: "🇯🇵". If the browser / host OS support display of emoji flags, that's what you'll see. If not, you'll probably see something that looks like "JP".
The problem is that the Windows' default emoji font, Segoe UI Emoji, has the 26 country flag letter codepoints the country flags are composed of, but has only letters representing them, so the flags will always be rendered as the Segoe UI Emoji letters unless an application explicitly declares that another Emoji Font is to be preferred. Luckily, you can just replace the Windows Emoji font by taking another Emoji Font and changing its internal name to Segoe UI Emoji. I did that for Google's Noto Emoji font, which you can download at https://github.com/perguto/Country-Flag-Emojis-for-Windows.
CSS class not updating HTML content
I have an eCommerce store on WordPress. We just migrated from Opencart to WordPress and have been having issues regarding the product description. All our products have different CSS in the description and we were hoping it could be done the way its done in opencart (where css tags start with style tag and followed by HTML classes which are referred in HTML tags). An example of the code from OpenCart is pasted below to give an idea: I tried doing the same thing that I did for opencart but that doesn't seem to work in the product description editor on wordpress. It's just taking the HTML tags and totally ignoring the css tags. <style> body { font-family: Open Sans, Arial, Helvetica, sans-serif } #topDiv { font-family: Arial, Helvetica, sans-serif } .tt1 { color: #000; font-size: 16px; font-size: calc(100% + 24 * (100vw - 320px) / 1600); font-size: calc(16px + 24 * (100vw - 320px) / 1600); line-height: 1.2; font-weight: 700 } </style> <div class="tt1">Pair Seamlessly</div> It's just displaying "Pair Seamlessly" without any formatting that should be coming from the css tag
I haven't done a lot of work in wordpress, but from what I know I believe there is specific file where you put all your CSS. Here's an article that might help. How to Find WordPress CSS File
Because all of your products rely on the same file (e.g. single-product.php or something similar) all the css you write for this file will be applied to al of your products. The easiest thing you can do is to give your products an ID. You can achieve this by passing the_ID(); into your while loop. Each product will have his own ID, so every product can have its own styling. So basically you'll get something like this: <ul class="products"> <?php $args = array( 'post_type' => 'product', 'posts_per_page' => -1 ); $loop = new WP_Query( $args ); if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post(); ?> <div class="product" id="product-<?php the_ID(); ?>">This is your product</div> <?php endwhile; else : echo __( 'No products found' ); endif; wp_reset_postdata(); ?> Now you can style your products like for example this way #product-1 { background-color:red; } Styles should be applied in its own stylesheet, which should be enqueued in functions.php The following documentation should give you enough guidance in how to do so: https://developer.wordpress.org/reference/functions/wp_enqueue_style/
I found the answer. Insert the following code to your child's theme functions.php file: add_action( 'woocommerce_after_add_to_cart_button', 'css_for_products', 30 ); function css_for_products() { global $product; if ($product->id == 784 or $product->id == 832 ) { wp_enqueue_style( 'sample-code', 'https://www.yoursite.com/css/custom.css',false); } Where custom.css is the css file that will be uploaded to the above location. Add more conditions for different products.
I am getting CSS populated automaticaly
I am using HTML Email creator/editor(I cannot share the name). I run into the problem that when I edit the email content and save it i get this bunch of CSS automatically: #ad-4, #ad-4-300x90, #ad-5-images, #ad-55, #ad-63, #ad-635x40-1, #ad-655, #ad-7, #ad-728, #ad-728-90, #ad-728x90-1, #ad-728x90-leaderboard-top, #ad-728x90-top, #ad-728x90-top0, #ad-732, #ad-734, #ad-74, #ad-88, #ad-88-wrap, #ad-970, #ad-98, #ad-a, #ad-a1, #ad-abs-b-0, #ad-abs-b-1, #ad-abs-b-10, #ad-abs-b-2, #ad-abs-b-3, #ad-abs-b-4, #ad-abs-b-5, #ad-abs-b-6, #ad-abs-b-7, #ad-absolute-160, #ad-ads, #ad-adsensemedium, #ad-advertorial, #ad-affiliate, #ad-around-the-web, #ad-article, #ad-article-in, #ad-aside-1, #ad-atf-mid, #ad-atf-top, #ad-ban, #ad-banner, #ad-banner-1, #ad-banner-970, #ad-banner-980, #ad-banner-atf, #ad-banner-body-top { display: none!important; } #ad-banner-bottom, #ad-banner-image, #ad-banner-placement, #ad-banner-top, #ad-banner-wrap, #ad-bar, #ad-base, #ad-beauty, #ad-below-content, #ad-big, #ad-bigbox, #ad-bigsize, #ad-billboard, #ad-billboard-atf, #ad-billboard-bottom, #ad-blade, #ad-block, #ad-block-125, #ad-block-bottom, #ad-block-container, #ad-border, #ad-bottom-300x250, #ad-bottom-banner, #ad-bottom-right-container, #ad-bottom-wrapper, #ad-bottomright, #ad-box, #ad-box-1, #ad-box-2, #ad-box-bottom, #ad-box-first, #ad-box-halfpage, #ad-box-leaderboard, #ad-box-rectangle, #ad-box-rectangle-2, #ad-box-right, #ad-box-second, #ad-box1, #ad-box2, #ad-boxATF, #ad-boxes, #ad-br-container, #ad-bs, #ad-btf-bot, #ad-btm, #ad-buttons, #ad-campaign, #ad-carousel, #ad-case, #ad-center { display: none!important; } #ad-circfooter, #ad-code, #ad-col, #ad-colB-1, #ad-column, #ad-container-1, #ad-container-2, #ad-container-adaptive-1, #ad-container-adaptive-3, #ad-container-fullpage, #ad-container-inner, #ad-container-leaderboard, #ad-container-mpu, #ad-container-outer, #ad-container-overlay, #ad-container1, #ad-contentad, #ad-cube-Bottom, #ad-cube-Middle, #ad-cube-sec, #ad-cube-top, #ad-desktop-wrap, #ad-discover, #ad-display-ad, #ad-div-leaderboard, #ad-double-spotlight-container, #ad-drawer, #ad-e-container, #ad-ear, #ad-extra-comments, #ad-extra-flat, #ad-f-container, #ad-featured-right, #ad-first-post, #ad-five, #ad-five-75x50s, #ad-flex-first, #ad-flex-top, #ad-footer, #ad-footer-728x90, #ad-footprint-160x600, #ad-for-map, #ad-frame, #ad-framework-top, #ad-front-btf, #ad-front-footer, #ad-front-page-160x600-placeholder, #ad-front-sponsoredlinks, #ad-full-width, #ad-fullbanner-btf { display: none!important; } #ad-fullbanner-outer, #ad-fullbanner2, #ad-fullbanner2-billboard-outer, #ad-fullwidth, #ad-giftext, #ad-globalleaderboard, #ad-google-chrome-sidebar, #ad-googleAdSense, #ad-gpt-bottomrightrec, #ad-gpt-leftrec, #ad-gpt-rightrec, #ad-gutter-left, #ad-gutter-right, #ad-halfpage, #ad-header-left, #ad-header-mad, #ad-header-mobile, #ad-header-right, #ad-holder, #ad-homepage-content-well, #ad-homepage-top-wrapper, #ad-horizontal, #ad-horizontal-header, #ad-horizontal-top, #ad-idreammedia, #ad-img, #ad-in-post, #ad-index, #ad-inner, #ad-inside1, #ad-inside2, #ad-interstitial-wrapper, #ad-introtext, #ad-label, #ad-label2, #ad-large-header, #ad-lb, #ad-lb-secondary, #ad-ldr-spot, #ad-lead, #ad-leader, #ad-leader-atf, #ad-leader-container, #ad-leaderboard-1, #ad-leaderboard-1-container, #ad-leaderboard-2, #ad-leaderboard-2-container, #ad-leaderboard-bottom, #ad-leaderboard-container, #ad-leaderboard-footer { display: none!important; } #ad-leaderboard-spot, #ad-leaderboard-top, #ad-leaderboard-top-container, #ad-leaderboard_bottom, #ad-leadertop, #ad-left, #ad-left-sidebar-ad-1, #ad-left-sidebar-ad-2, #ad-left-sidebar-ad-3, #ad-left-timeswidget, #ad-links-content, #ad-list-row, #ad-lrec, #ad-main-bottom, #ad-main-top, #ad-makeup, #ad-manager, #ad-manager-ad-bottom-0, #ad-manager-ad-top-0, #ad-medium, #ad-medium-lower, #ad-medium-rectangle, #ad-medrec, #ad-medrec_premium, #ad-megaban2, #ad-megasky, #ad-mid, #ad-mid-rect, #ad-middle, #ad-middlethree, #ad-middletwo, #ad-midpage, #ad-minibar, #ad-module, #ad-mpu, #ad-mpu-topRight-container, #ad-mpu-warning, #ad-mpu1-spot, #ad-mpu2, #ad-mpu2-spot, #ad-mpu600-right-container, #ad-mrec, #ad-mrec2, #ad-new, #ad-news-sidebar-300x250-placeholder, #ad-north, #ad-north-base, #ad-northeast, #ad-one, #ad-other { display: none!important; } #ad-output, #ad-overlay, #ad-page-1, #ad-page-sky-300-a1, #ad-page-sky-300-a2, #ad-page-sky-left, #ad-pan3l, #ad-pencil, #ad-placard, #ad-placeholder, #ad-placement, #ad-plate, #ad-popup, #ad-popup1, #ad-position-a, #ad-post, #ad-push, #ad-pushdown, #ad-r, #ad-rbkua, #ad-rec-atf, #ad-rec-btf-top, #ad-recommend, #ad-rect, #ad-rectangle, #ad-rectangle-flag, #ad-rectangle1, #ad-rectangle1-outer, #ad-rectangle2, #ad-rectangle3, #ad-region-1, #ad-results, #ad-rian, #ad-right-3, #ad-right-container, #ad-right-sidebar, #ad-right-sidebar-ad-1, #ad-right-sidebar-ad-2, #ad-right-skyscraper-container, #ad-right-top, #ad-right2, #ad-right3, #ad-righttop, #ad-ros-atf-300x90, #ad-ros-btf-300x90, #ad-row, #ad-row-1, #ad-s1, #ad-safe, #ad-secondary-sidebar-1 { display: none!important; } #ad-section, #ad-separator, #ad-shop, #ad-side, #ad-side-text, #ad-sidebar, #ad-sidebar-1, #ad-sidebar-2, #ad-sidebar-3, #ad-sidebar-300x80, #ad-sidebar-btf, #ad-sidebar-container, #ad-sidebar-mad, #ad-sidebar-mad-wrapper, #ad-sidebar-right_300-1, #ad-sidebar-right_300-2, #ad-sidebar-right_300-3, #ad-sidebar-right_bitgold, #ad-sidebar1, #ad-sidebar2, #ad-sidebarleft-bottom, #ad-sidebarleft-top, #ad-single-spotlight-container, #ad-skin, #ad-sky, #ad-sky-atf, #ad-sky-btf, #ad-skyscraper, #ad-skyscraper-feedback, #ad-skyscraper1-outer, #ad-sla-sidebar300x250, #ad-slot-1, #ad-slot-2, #ad-slot-4, #ad-slot-right, #ad-slot1, #ad-slot4, #ad-slug-wrapper, #ad-small-banner, #ad-smartboard_1, #ad-smartboard_2, #ad-smartboard_3, #ad-software-description-300x250-placeholder, #ad-software-sidebar-300x250-placeholder, #ad-space, #ad-space-1, #ad-space-2, #ad-space-big, #ad-special, #ad-splash { display: none!important; } #ad-sponsored-traffic, #ad-sponsors, #ad-spot, #ad-spot-bottom, #ad-spot-one, #ad-springboard-300x250, #ad-squares, #ad-standard-wrap, #ad-stickers, #ad-story-bottom-in, #ad-story-bottom-out, #ad-story-right, #ad-story-top, #ad-stripe, #ad-tab, #ad-tail-placeholder, #ad-tape, #ad-target, #ad-target-Leaderbord, #ad-teaser, #ad-techwords, #ad-textad-single, #ad-three, #ad-tlr-spot, #ad-top-250, #ad-top-300x250, #ad-top-728, #ad-top-banner, #ad-top-leaderboard, #ad-top-left, #ad-top-lock, #ad-top-right, #ad-top-right-container, #ad-top-text-low, #ad-top-wrap, #ad-tower, #ad-tower1, #ad-trailerboard-spot, #ad-tray, #ad-two, #ad-typ1, #ad-uprrail1, #ad-video, #ad-video-page, #ad-west, #ad-wide-leaderboard, #ad-wrap, #ad-wrap-right, #ad-wrapper-728x90, #ad-wrapper-left { display: none!important; } #ad-wrapper-right, #ad-wrapper1, #ad-yahoo-simple, #ad-zone-1, #ad-zone-2, #ad-zone-inline, #ad001, #ad002, #ad01, #ad02, #ad1-468x400, #ad1-home, #ad1-placeholder, #ad1-wrapper, #ad1006, #ad101, #ad10Sp, #ad11, #ad11Sp, #ad120x600, #ad120x600container, #ad120x60_override, #ad125B, #ad125BL, #ad125BR, #ad125TL, #ad125TR, #ad125x125, #ad160, #ad160-2, #ad160600, #ad160Container, #ad160Wrapper, #ad160a, #ad160x600, #ad160x600right, #ad180, #ad1Sp, #ad1_holder, #ad1_top-left, #ad2-home, #ad2-label, #ad2-original-placeholder, #ad250, #ad260x60, #ad2CONT, #ad2Sp, #ad2_footer, #ad2_iframe, #ad2_inline { display: none!important; } this is just part of it. In total there are 3500 lines of this type including some Ad links and so on. I want to get rid of it but I cannot. because of it it recognizes the email as a phishing scam. I cannot remove it. Everytime i remove it and save the html it comes again. Has someone run into this problem before.
You've been hacked, or at least get code injected :) Time to re-install your CMS if you cant find the origan and fix the breach. You might edit the current odd css out via the database, but the breach remains existing, so if the bot comes by again (I highly doubt it's a targeted attack, it will come by again), you have this problem again. Re-install your CMS, but before you do that, check last editted files via the commandline, and see if one stands out. Could be that one php file is altered, then you know where to look for upgrades. But a warning: In general the rule of thumb is "If you've been hacked, you no longer own the server". This is why it's time for a whipe, a backup and a upgrade. BTW: if not telling your editor is a part of your security, you need better security.
Beginners code: HTML Styling ID within ID not working
I have just started learning HTML and I am having problems with IDs/classes within IDs/classes. So, to my knowledge, an ID is specified by a #. That would mean that if I wanted to style an ID within and ID, wouldn't that be: #ID1 #ID2 { ... } Which would mean that the styling will only apply for ID2 that is inside ID1? Please correct me if I'm wrong. When I used the same principle within my (very simple beginner) code, it didn't work. Here is my code: <!DOCTYPE html> <html> <head> <title>1 May 2016</title> <style> #name { color: blue; font-family: Tahoma; } #parafont #1 { font-family: Arial; } #parafont #2 { font-family: Times; } #parafont #3 { font-family: Courier; } parafont #4 { font-family: Lucida Grande; } #parafont #5 { font-family: Helvetica; } #test1 #6 { color: blue; } </style> </head> <body> <h3 id="name">Bob Bobbington</h3> <p>1 2 3 4 5 6 7 8 9 10</p> <p>When was this website created? Check the <b>title</b>.</p> <h3>All animals are quite interesting...</h3> <p id="parafont"> <span id="1">This is a test paragraph.</span> <span id="2">Each sentence should have a different font.</span> <span id="3">This paragraph is going to use some styling.</span> <span id="4">Styling will change the font of each sentence.</span> <span id="5">Let's see whether it works!</span> </p> <div id="test1"> <p id="6">Test</p> </div> </body> </html> All help is very much appreciated!
Change the id numbers 1 to something that starts with letters. ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
IDs can not start with numbers first of all. Also since IDs are meant to be specific, using nesting to select an element is redundant. #id #id2 would be the same thing as just #id2 as long as the more specific #id #id2 was used
Trying to target each a link with a unique font-awesome icon
Trying to target each active link with an Font-Awesome icon. I am trying to use a combination os "Content:before" AND "a::first-child". Targeting the third a-link "contact us" with an icon, not working. Tried many combinations. Is this even possible? xD .children.windowbg > a::first-child before{ content: "\f114"; font-family: fontawesome !important; padding-right:5px; } <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <td class="children windowbg" colspan="3"> <strong>SUB-FORUMS</strong>: Report Copyright Violations, Disclaimer, Contact Us, Privacy policy </td> ? https://jsfiddle.net/rr78gfw1/
.windowbg a:nth-of-type(1):before{ content: "\f114"; font-family: fontawesome !important; margin-left: -23px; position :absolute; color:red; font-size:20px; } .windowbg a:nth-of-type(2):before{ content: "\f115"; font-family: fontawesome !important; margin-left: -23px; position :absolute; color:red; font-size:20px; } .windowbg a { margin-left:25px; } <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="children windowbg" colspan="3"> <strong>SUB-FORUMS</strong>: Report Copyright Violations, Disclaimer, Contact Us, Privacy policy </div> Some of the solutions mentioned here are not purely CSS solutions as they ask you to change the DOM structure. You have not used the selectors rightly,There is no : before the before :P and a is not the first child.Use nth-of-type selector for this. Also you cannot use td tags like that without a table.My demo is after replacing the td with a div. Like this, .windowbg a:nth-of-type(1):before{ content: "\f114"; font-family: fontawesome !important; margin-left: -23px; position :absolute; color:red; font-size:20px; } Fiddle link: https://jsfiddle.net/rr78gfw1/1/
you give a CLASS to your link and give him a font-family .yourlink{ font-family: fantasy; } <td class="children windowbg" colspan="3"> <strong>SUB-FORUMS</strong>: Report Copyright Violations, Disclaimer, Contact Us, Privacy policy </td>
In order to add font-awesome icons to your links, just use an <i> tag as <i class="fa fa-tags"></i> inside your anchor tags. <td class="children windowbg" colspan="3"> <strong>SUB-FORUMS</strong>: Report Copyright Violations<i class="fa fa-tags"></i>, Disclaimer<i class="fa fa-exclamation"></i>, Contact Us<i class="fa fa-phone"></i>, Privacy policy<i class="fa fa-info"></i> </td> Refer here for demo
The other answers have preferable solutions. This one just explains errors in the code snippet Pseudo-classes like :first-child are with a single colon, instead of two. :first-child selects (in this case) an a tag that's the first child of .children.windowbg. The a tag you're trying to select is no the first child, but the first of it's type. Therefore, you should use :first-of-type. To select a pseudo-element, use a colon (:before). Now you were selecting a before tag in the a tag. A td tag without a table is not valid, and the tag is removed in the code snippet, so for the sake of testing, I wrapped it in a table and a tr tag. .children.windowbg > a:first-of-type:before { content: "\f114"; font-family: fontawesome !important; padding-right: 5px; } <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> <table> <tr> <td class="children windowbg" colspan="3"> <strong>SUB-FORUMS</strong>: Report Copyright Violations, Disclaimer, Contact Us, Privacy policy </td> </tr> </table> The other answers are preferable, because when you change the order of the links or add one, you need to change the CSS (and because CSS isn't for non-dynamic styling). A better solution is to add the icons in the HTML. Update There is :first-of-type to select the first element of it's kind, usually in a certain parent. To select the last child, use :last-of-type. To select other children, use :nth-of-type(n), where n is the index of the element. The first element has index 1, not index 0. For example, to select the third element, use :nth-of-type(3). But n is not limited by that. You can use odd and even to select odd and even elements, and you can make a calculation with n. Then it selects elements with an index that could be the answer when n is any whole number. For example, when you use :nth-of-type(2n): Values for "n" | Indices ---------------------------- 0 | 2 * 0 = 0 1 | 2 * 1 = 2 2 | 2 * 2 = 4 3 | 2 * 3 = 6 ... | ... This selects all elements with an index that is a multiple of 2, so all even elements. Another example is :nth-of-type(3+n): Values for "n" | Indices ---------------------------- 0 | 3 + 0 = 3 1 | 3 + 1 = 4 2 | 3 + 2 = 5 3 | 3 + 3 = 6 ... | ... This selects all elements, except the first two. Explanation from MDN. This goes the same for :first-child (:last-child, :nth-child(n)).