I have customized my WordPress theme to use Montserrat for titles and Open-Sans for body content.
However, when adding the trademark symbol ™ / ™ to product titles, it appears in a different font style similar to Times New Roman.
Is there a way to specifically apply the custom font only to the ™ trademark HTML entity symbol globally?
Although using <sub>TM</sub> in titles partially solves the issue, it does not work consistently across all areas such as breadcrumbs.
While it is technically possible, it may not be the most user-friendly option:
@font-face rules include a unicode-range property that allows you to target a specific character:
c.onchange = e=> document.body.classList.toggle('amp');@font-face {
font-family: 'Ampersand';
src: local('Courier');
unicode-range: U+26;
}
body.amp{
font-family: Ampersand, cursive;
}
body{
font-family: cursive;
}<span>lorem ipsum dolor sit amer & some others</span>
<input type="checkbox" id="c">However, this method can be cumbersome as you would need to prioritize this font in your font declarations wherever you want it to be applied...
It is common practice to utilize distinct markup for these elements and apply CSS to render the actual content. To illustrate, instead of
MyCompany™
a more suitable approach would be:
MyCompany<i class="symbol symbol-tm" />
Subsequently, CSS can be employed in the following manner:
i.symbol {
position: relative;
width: 1.5em;
}
i.symbol.symbol-tm:after {
display: inline;
content: "\2122";
font-family: "Times New Roman";
}
After using the styledComponents library extensively, I found a need to create a global styled component that could be easily inserted into any part of my code. This led me to come up with the following innovative solution:
export const Logo = styled.span`
::before {
display: inline;
content: "\u00A9";
/* font-family: [your preferred font family here] */
}
`;
With this setup, I can conveniently use <Logo /> anywhere in my project.
<div id="unique-icons"> <a href="#"> <img class="github-logo1" src="GitHub-Mark-64px.png" alt="first github logo"> </a> <a href="#"> <i ...
My current setup includes HTML in Pug and Vue code, functioning smoothly with dynamic arrow width adjustment. .abc--step-bar: .abc--step-bar-color(:style="`width: ${progressBar.width}`") .row .col(v-for="(item, i) in progressItems&qu ...
Having an issue with the example accordion from Bootstrap 4's documentation. After troubleshooting, I discovered that the 'show' class gets removed and added again when trying to close the card. Links to images: https://i.sstatic.net/lxKiK. ...
When using an absolute v-overlay inside a v-col, the grandparent v-row is covered by the overlay instead of just the parent v-col. "Absolute overlays are positioned absolutely and contained inside their parent element." -According to Vuetify&apo ...
There seems to be an issue with the :active state, if anyone can spot the problem and provide assistance, it would be greatly appreciated. Here is the HTML code: http://pastebin.com/4wCi3L2Z And here is the CSS code: http://pastebin.com/jZvgdDaA Thank y ...
Hey guys, I'm encountering an issue while creating mega menu tabs. Here's what I'm doing: I have tabs that trigger a 'mouseenter' event in the background when hovered over. This event adds an 'active' CSS class to bo ...
Trying to arrange two same-sized canvas elements on top of each other and next to a third canvas. In the figure below, I aim to have 2 and 3 positioned together, adjacent to 1. https://i.stack.imgur.com/dWkhc.png Attempting to address this issue with the ...
I'm working on aligning 2 input fields side by side within the same line. To achieve this, I've been utilizing Flexbox. However, I've observed that when using Flex with both 'row' and 'column', it introduces extra spacing ...
Here is the HTML code snippet I am working with: <div id="addFieldUI" style="display: none"> <div> Field Name: <input type="text" /> </div> <div> Field Value </div> <div> Data Type: <select& ...
Within my code, I have two sibling divs that contain additional nested divs as shown below: <div class="btn_lists"> <div class="btn green_btn"> <img src="<?= asset_url() ?>images/escolar_07__1.png" /> </div> & ...
Encountering an odd issue in IE9 while attempting to display a background gradient. The approach involves applying multiple classes to a container element. <div class="gradient corners"></div> Here is the CSS being used: .gradient { backgro ...
I've been facing some challenges with this Bootstrap slider for quite some time now. Despite my best efforts and thorough research on the forum, I just can't seem to make it function properly. Here's the code snippet in question: <!DOCTY ...
I've been developing a rock paper scissors game where two images shake to mimic the hand motions of the game when a button is clicked. However, I'm facing an issue where one of the images flips horizontally during the animation and then flips bac ...
I have utilized the Wordpress sporty theme that I downloaded from: The Wordpress version being used is 4.8 Within this theme, there are RSS and Wordpress.org fields present in the footer. How can I remove these mentioned fields? In other words, which f ...
When attempting to paste a URL into the text box such as https://stackoverflow.com/, it does not automatically convert to a hyperlink. I previously tried using regular expressions in this related question. The function I implemented worked correctly, howe ...
Having trouble changing the background color of the <AppBar> in my project. Using the Container component to set a maximum screen size, but encountering issues when the screen exceeds this limit. The AppBar background color appears as expected while ...
Recently, I decided to experiment with the jquery superslide plugin on a website of mine. To my surprise, there was an unexpected padding at the bottom of the page. My suspicion is that the display area is not being calculated correctly or that a margin is ...
I have a confidential folder named 'inc' where I store sensitive files such as passwords in php connection files. This folder is located at the same level as the 'public_html' folder. I successfully accessed php files with database conn ...
I'm facing an issue where I need to dynamically add a list of LI items to a UL using jQuery. However, when I try to alert the number of LI elements in this list, it only shows 0. I suspect that it's because the code is trying to count the origina ...
I'm looking to have my React app display as if the user has changed the zoom level to 90%. I attempted to tackle this issue using CSS. body { transform: scale(0.9); } However, this method did not result in the screen appearing similar to wh ...