I am trying to add a glyph icon as part of an email address link. The icon shows but there is no spacing between the icon and the email address text (I want the hyperlink to include both the icon and the text... including the space). What's the best way to accomplish this?
<a href="mailto:someone#somewheredotcom" title="Some Email">
<span class="glyphicon glyphicon-envelope">someone#somewheredotcom</span>
</a>
You can try to do this:
.glyphicon-envelope:before {
margin-right: 5px;
}
Be aware that your custom css file should be included after bootstrap.css
If you using only glyphicon just add one space after </span> tag like below
<span class="glyphicon glyphicon-user"></span> Individual
If you using glyphicon along with font awesome library reference just add fa-fw at the end of class.
<a href="mailto:someone#somewheredotcom" title="Some Email">
<span class="glyphicon glyphicon-envelope fa-fw">someone#somewheredotcom</span>
</a>
From http://getbootstrap.com/components/, see this note
Be sure to leave a space between the icon and text for proper padding.
So, you can modify the CSS if desired, for example using Bogdan's idea, or just by adding between the icon and your text:
<a href="mailto:someone#somewheredotcom" title="Some Email">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> someone#somewheredotcom
</a>
According to Bootstrap:
Icon classes should only be used on elements that contain no text content and >have no child elements.
You should put the email address outside of span:
<span class="glyphicon glyphicon-envelope fa-fw"></span>someone#somewheredotcom
Related
I am trying to measure engagement (capture text input, send value into GTM data layer etc.) when a visitor clicks on dropdown and type into the text box (see screenshot).
The problem is, there is no submit button. Search and display is performed automatically. Wondering, is even possible to push entry text into GTM Data layer?
Form screenshot
Here is the part of the script
<div class="dropdown-menu open" style="max-height: 481.5px; overflow: hidden; min-height: 151px;">
<div class="bs-searchbox"><input type="text" class="form-control" autocomplete="off"></div>
<ul class="dropdown-menu inner" role="menu" style="max-height: 420.5px; overflow-y: auto; min-height: 90px;">
<li data-original-index="1" class="">
<a tabindex="0" class="indent-1 location-name" style="" data-tokens="null">
<span class="text">All Destinations</span><span class="fa fa-checkmark check-mark"></span>
</a>
</li>
<li data-original-index="2" class=""><a tabindex="0" class="indent-1 location-name js-state-AL" style="" data-tokens="null"><span class="text">Alabama</span><span class="fa fa-checkmark check-mark"></span></a></li>
.
.
.
.
.
</ul>
</div>
You can do this via custom HTML tag. In the tag you write a custom listener for the keydown browser event. It's slightly complicated but described very well in the link below by simo ahava.
https://www.simoahava.com/analytics/track-autocomplete-search-google-tag-manager/
Hope that helps.
I'm using template plugin for inserting html snippets. For example:
<a class="button" href="#"><span class="button-inner"><span class="button-label">Button Text</span></span></a>
Everything goes fine until editor tries to change button's text and exit its html to add some more text after. The caret doesn't leave the A tag and stops within spans or before closing A tag. So in the end we get something like this:
...Button Text</span> some more </span> text here </a>
It breaks the layout completely.
Is there a way to mark the link as single solid block or spans as non-enterable with some attributes to prevent inserting text within unexpected places?
You use the contenteditable="false" attribute to make a portion of your HTML non-editable. Here is an example:
http://fiddle.tinymce.com/Zxgaab
I changed your link HTML to this:
<a contenteditable="false" class="button" href="#">
<span class="button-inner">
<span class="button-label">
Button Text
</span>
</span>
</a>
It will act like a single character in the editor...
In Vaadin a button is rendered as the following HTML content:
<div tabindex="0" role="button" class="v-button v-widget" id="searchButton">
<span class="v-button-wrap">
<span class="v-button-caption">Search</span>
</span>
</div>
As I read this caption "Search" will not be accessible to screen readers (they will have problem with reading it).
However, when I test with Mac VoiceOver the caption is read correctly. Is it just a Mac VoiceOver correct support or am I missing something?
I want to trigger a Google Tag Manager tag with the text within a div class. The text is "Accommodation offer successfully edited". I've tried element ids and classes to no success. Do you have any recommendation? Is this even possible?
There is nothing else on the page that makes it unique so I really have to go with what is inside this div
<div class="alert alert-success">
<button data-dismiss="alert" class="close close-sm" type="button">
<i class="fa fa-times"></i>
</button>
<i class="fa fa-check"></i>
Accommodation offer successfully edited
</div>
I am quite interested in exploring accessibility in forms and accessibility in general.
Is it against the rules to use an image as a label if the image also has an alt tag representing the the label? Would this be ok? If not what is the best approach? I have a small form for clients to enter their links to the social sites they use and would like to use the logo of the social site rather than text (label).
Thanks,
Jack
I think it would be better to use CSS class:
<div class="social">
<label for="social1" class="s1">Social 1</label>
<input type="text id="social1" name="social1" />
<label for="social2" class="s2">Social 2</label>
<input type="text id="social2" name="social2" />
</div>
So you could apply background like this:
.social {
display: block;
width: 50px;
height: 50px;
background-repeat: no-repeat;
}
.social .s1{
background-image: url("social1.gif");
}
.social .s2{
background-image: url("social2.gif");
}
I would not remove text from the labels. So it would be possible for users to select that text but still look like an image (with appropriate background).
But if you really want to stick with images only then you can use this approach:
<div class="social">
<label for="social1" class="s1">
<img alt="Social 1" src="img/social1.gif" />
</label>
<input type="text id="social1" name="social1" />
<label for="social2" class="s2">
<img alt="Social 2" src="img/social2.gif" />
</label>
<input type="text id="social2" name="social2" />
</div>
and answering your question, I think it is ok to have images with alt text.
Disclaimer: I'm not a usability expert
I think it would depend on a few factors.
Are the links all to sites that have well known brands/logos? Will people understand that it's not some random art?
Is there some context that indicated that it is clickable? For instance, is this in a table where one of the table headers states "Link"? Does it highlight when you mouse over it?
Is there a reason why typical text links would look particularly ugly or nondistinctive?
Are there sites with similar functionality that do the same thing?
I hope this helps in some fashion!