I want to add a "BETA" symbol at top of the "Brand Name" like "TM" symbol in my Navbar how can I do that..?
You can just use css to achieve this, and when you copy the text it won't get copied!
h1::after {
content: 'BETA';
font-size: 12px;
vertical-align: top;
}
<h1>StackOverflow</h1>
Related
I'm trying to insert LUI (Leonardi UI) library icons with CSS into our web app (QlikSense).
It works perfectly fine with icons with one "word" such as "play":
.source-sans-pro .qv-collapsed-listbox .title-wrapper::after {
font-family: "LUI icons" !important;
content: "play";
padding-right: 10px;
}
However, when trying to add icons with two "words" such as "arrow-down", it wont work anymore:
.source-sans-pro .qv-collapsed-listbox .title-wrapper::after {
font-family: "LUI icons" !important;
content: "arrow-down";
padding-right: 10px;
}
Anyone an idea how to fix this?
Try and replace the - with an _ (underscore) character, e.g. content: "arrow_down";
I have an icon which is actually on my webpage but I still cant see it.
HTML
<i class="iconMan"></i>
CSS
.iconMan{
background-image: url(../../assets/imgs/iconMan.png);
display: block;
}
this is what I get:
The Icon should be next to "Test User" but it's not showing. I already tried adjusting height and width but it didn't work.
Any suggestions what I could do?
for displaying an icon you can move your styling to the ::after or ::before pseudo selectors.
.iconMan {
display: inline-block;
}
.iconMan::before {
content: url(../../assets/imgs/iconMan.png);
}
You have missed quotes
.iconMan{
background-image: url("../../assets/imgs/iconMan.png");
display: block;
}
try to do like this
<img src="/assets/imgs/iconMan.png"
I guess it will work
just put this to your html code
I'd like to add a Font Awesome Icon and other styling (e.g., <em>) to the qq-drop-area-text of FineUploader. Is this possible? It looks like the text is styled using a CSS content area.
Example HTML from FineUploader:
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here!">...</div>
Desired:
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="<span class='fa fa-upload'></span> Drop files <em>here</em>!">...</div>
Thanks
.qq-uploader:before {
/*content: attr(qq-drop-area-text) " ";*/
font-family: FontAwesome, 'Open Sans', Arial;
content: "\f0c5 Drop files here";
position: absolute;
font-size: 200%;
left: 0;
width: 100%;
text-align: center;
top: 45%;
opacity: 0.25;
}
Here's my example where f0c5 is the Unicode value for the Font Awesome icon I wanted to use. In this case it's the fa-files-o icon. Click any icon on the Font Awesome list of icons to display its Unicode value.
To add more styles to the dropzone message, simply include the following in your project's CSS file:
.qq-uploader:before {
// dropzone text styles go here
}
I have some code which displays images from imgur.
When hovering over an image, I want the title attribute to appear at the top of the image.
I have achieved all of this, but when the text becomes visible, it only appears on one line and writes over itself when it runs out of space, as in the image.
I would like the text to start on a new line once it reaches the end of it's container.
I have tried adding word-wrap: break-word; to each of the CSS selector below, as well as to a P selector (as the link is wrapped in a p-tag).
Any advice on how to resolve this is much appreciated!
I have the following html:
<section id='photos'>
<p>
<a class='hovertext' href='http://i.imgur.com/gallery/eWlGSdR.jpg' title='Opened my window shade while flying over Japan, noticed a volcano was erupting. (OC) [2448x2448]'>
<img src='http://i.imgur.com/eWlGSdR.jpg' alt=''>
</a>
</p>
And the following CSS:
a.hovertext {
position: relative;
text-decoration: none !important;
text-align: left;
}
a.hovertext:before {
content: attr(title);
position: absolute;
top: -1;
padding: 0.5em 20px;
width: 90%;
text-decoration: none !important;
color: red;
opacity: 0.0;
}
a.hovertext:hover:before, a.hovertext:focus:before {
opacity: 1.0;
}
As Dinesh said in the comments, this was caused by poor code awareness, as elsewhere in the code, I was calling 'line-height:0;' on the #photos element.
Removing this solved the problem.
i think you coul use some java script on this, if you only want to make it add a extra line to it, correct me if im wrong.
Here's an example what i think you mean:
First add this text next your class="hovertext" :
id="HoverText"
Add this part after your body or paste the code between script into a .js file and call it with
<script src="filename.js"></script>
<script>
HoverText=document.getElementById("HoverText");
HoverText.onclick=function(){ClickToShowText()};
function ClickToShowText(){
HoverText.innerHTML+="<br>New line with text";
}
</script>
just use the break tag at the end of the text that's supposed to be on the first line.
</br>
easy
.responsive td.head1:before {
content: url(myimage.png )
}
I want to put an image into a responsive table column (I'm using this to put the column titles as rows in a similar manner described at CSS Tricks here. The difference is that my 'headings' contain images. Those images need to be rescaled to fit, and I seem to be drawing a blank using such things as background-size. So is there any way to rescale/resize the image?
Update: Thanks for your suggestions about using a background-image - you get bonus points if someone can tell me a way of getting an image in a :before segment with an alt/description tag for disability compliance.
You can give the class a background image and style it. Try this...
name{
background-image:url("url here");
background-size:80px 60px;
}
Append a background image to this item, like here: http://jsfiddle.net/4rB5X/1/
.responsive th:nth-child(1):before {
content: "";
position: relative;
display: inline-block;
width: 30px;
height: 30px;
background-image: url(http://www.placehold.it/30x30);
background-repeat: no-repeat;
background-position: top left;
vertical-align: middle;
}
th
{
vertical-align: middle;
}
To address your question with the alt Tag for these images:
You may indeed use content for an pseudo alt-tag. You can use an attribute to define the desired text. Here is an exampe:
http://jsfiddle.net/4rB5X/2/
CSS
/* Puts the data-img-alt value of the <th> as content */
.responsive th:nth-child(1):before {
content: attr(data-img-alt);
}
/* Hide Text from content */
th.hide-text:before
{
text-indent: -99999px;
overflow: hidden;
text-align: left;
}
HTML
<thead>
<th class="hide-text" data-img-alt="Lalala">Test</th>
<th>Test</th>
</thead>
Update:
Like #vogomatix pointet out, the content property must not be null, but at least an empty string (content:""; would be ok). To have a workaround, try this:
th:before
{
content: "";
}
th[data-img-alt]:before
{
content: attr(data-img-alt);
}