I am trying to move the icons in my /ar footer to the front of the text.
Here's the url and a screenshot:
http://qarawa-sweets.com/ar/
Image description of the wanted result
https://i.stack.imgur.com/RMDwn.png
HTML Code:
< span style="color: #f45152; font-size: 11pt;" >< i class="fa fa-whatsapp" style="color: green;" > < /i > 00972-598-301-381 < /span >< /p >
And here is the CSS:
.fa, .fab, .fad, .fal, .far, .fas {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
I found this https://stackoverflow.com/questions/74168999/how-to-insert-icon-before-text but I couldn't apply it.
I figured it out, I added (direction: ltr;) to my HTML code and it worked.
This can also be added as CSS in case you can't edit your HTML
Related
On this website, I'm unable to remove the bold property from the bold text (text starts with "Conforme o art. 43...").
What is most intriguing is that the font-weight command below applies normally to all parts of the referred site, except for the bold part.
I'm using the following code in Stylebot (Chrome Extension):
div {
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
How can I get this done? Thanks in advance!
Please let me know if this is what you are looking for.
div > * {
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
or
* {
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
Edit: Maybe this is more what you are looking for->
.q-question-enunciation > span{
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
The text you are referring to ("Conforme o art. 43...") is inside a span tag that has an inline style style="font-weight: bold,".
An inline style like this will override every CSS rule that you define in an external style sheet or in a <style> tag inside the header of your page, so you need to
...either erase this style tag in the HTML code (if it's actually there), or
...if it's not there, it's inserted via javascript. So you need to find out which javascript inserts this code into the HTML code and erase or deactivate that code.
EDIT / Additional note: The code of the answer which you just accepted will apply that CSS rule either to all direct children elements of any div or (second option) even apply it to all elements in your page. I strongly doubt that you want either of this, since most likely your pages will consist of more than what you showed us...
I am using material2 and Material icons in my project. I want to know how these named icons are rendered in the browser. I have used
<button md-raised-button><md-icon>mode_edit</md-icon></button>
and in the browser, If I inspect the element
<md-icon class="mat-icon material-icons" role="img" aria-hidden="true">mode_edit</md-icon>
Here are the classes that are used
.mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 24px;
width: 24px;
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
but I am not able to understand how these icons get rendered on UI?
I just know that md-icons are font icons that are vector images. Can someone explain the way it is rendered?
This feature is called ligatures which allows to render icons using name.
you can find more details in below link
https://alistapart.com/article/the-era-of-symbol-fonts
http://google.github.io/material-design-icons/#icon-font-for-the-web
As per the material icon's documentation
It’s easy to incorporate icons into your web page.
<i class="material-icons">face</i> // rendered as face
This example uses a typographic feature called ligatures, which allows
rendering of an icon glyph simply by using its textual name. The
replacement is done automatically by the web browser and provides more
readable code than the equivalent numeric character reference
And here is the detailed answer on stackoverflow
How do ligature icons work in Material Icons?
I would like to replace the background image in my menu with a string that uses a FontAwesome character. It is a ready-made menu, a module in Joomla.
It looks like this:
Here is the CSS:
.responsiveMenuTheme5m.isMobile > li.deeper > span {
background-image: url("../images/downArrow.png") !important;
background-position: right 57px !important;
background-repeat: no-repeat !important;
}
So the menu coder provided an image called downArrow.png. Which is basically a caret-down. I would like to replace this with FontAwesome <span class="fa fa-caret-down"> </span>. I've got a Twitter Bootstrap 3 template and I've got FontAwesome installed, so I thought this should be a possibility, even without tinkering with the menu code, but only with css.
Can anyone help me do it?
Try this
.responsiveMenuTheme5m.isMobile > li.deeper > span{
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.responsiveMenuTheme5m.isMobile > li.deeper > span:before {
content: "\f0d7";
}
You should be able this by changing css of span element. If everything is ok and font awesome is imported correctly by adding:
.responsiveMenuTheme5m.isMobile > li.deeper > span:before {
content: "\f0d7";
}
your font will appear.
You can check out this code http://fontawesome.io/icon/caret-down/
You may also try this one:
.responsiveMenuTheme5m.isMobile > li.deeper > span {
background-position: right 57px !important;
background-repeat: no-repeat !important;
}
Replace the caret with the following code:
<i class="fa fa-caret-down"></i>
You might have to use the <span> as an option, like so:
<span class="fa fa-caret-down"></span>
You might have to play with the left caret distance by changing the values found in the background-position.
How to change the Unicode for an ::after object in wordpress?
I tried to do it in css and it just imputed the unicode code instead of the icon?
The original code is this:
.x-navbar .desktop .x-nav li>a>span:after {
content: "\f103";
margin-left: 0.35em;
font-family: "FontAwesome" !important;
font-style: normal !important;
font-weight: normal !important;
text-decoration: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
And the code I updated it to is this. I have tried using an !important; tag on the end of the unicode line and no luck, so I took that out...
x-navbar .desktop .x-nav li>a>span:after {
content: "f0d7";
margin-left: 0.35em;
font-size: 16px;
font-family: "FontAwesome" !important;
font-style: normal !important;
font-weight: normal !important;
text-decoration: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
color: rgba(82, 76, 76, 0.43);
-moz-osx-font-smoothing: grayscale;
}
This is my div site below.
http://wvleadership.cyndeeadkins.com/
So what am I doing wrong and why is this so hard to over ride?
So I finally found out why it was dropping the "\" from the code. I finally got a response from the wordpress theme developer. This will be nice to know for anyone else dealing with an issue like above.
There were two issues all together.
#1 issue: I was saving this css code in the custom css section within the
"customizer" and it apparently doesn't like that. You need to save it in the child-theme's style.css file instead.
2 issue: I needed to add a little more code to the string, adding "body" in the beginning.
body .x-navbar .desktop .x-nav li>a>span:after {
content: "\f0ab";
}
I updated the child theme css file, then refreshed the caching and it worked. :D
My question is pretty simple, but I can't get it to work.
I understand that you can make a button with Bootstrap + Glyphicon like so:
<span class="glyphicon glyphicon-chevron-left"></span> Default text here
But, I want the content & styling seperate (as is normal, right?), because it makes editting a lot easier (just one scss file instead of 54 html files with buttons).
Can I use ::before or ::after on the button and then use "content" in scss to include a Glyphicon? If so, how?
The first idea probably is do something like this
#import "variables";
#import "glyphicons";
.my-btn{
&:before{
.glyphicon;
.glyphicon-chevron-left;
}
}
but that compile into something like:
.my-btn:before {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.my-btn:before:before { /*this is wrong*/
content: "\e079";
}
And nested pseudo-elements It is not possible if I am not mistaken see this Nesting pseudo-elements inside pseudo-elements
So you have to do this:
//HTML
Default text here
//CSS
#import "variables";
#import "glyphicons";
.my-btn{
&:before{
.glyphicon;
}
&.my-chevron-left{
.glyphicon-chevron-left;
}
}
PD: I'm using less, in SCSS is quite similar