I want to add a symbol like this on the button on my website, I've been looking for a symbol like this, but could not find it. what to add to my html and css scripts ? 🙏🙏
You can use Fontawesome which provides a lot of icons even in the free version.
For down angle: https://fontawesome.com/icons/angle-down?style=solid
Related
I am building a web app that allows users to write their own html pages using the Froala editor integrated on my website.
The editor works really well and provides a great degree of control as well but, there is a small problem I am facing with the bold button. If you highlight some text inside the editor and click on the bold button, in the editor the text does become bold but in the corresponding html which is generated has a simple <strong> tag around it. Now when you load that html on a browser when it is delivered via a link or any other service, it does not show up as bold unless we write some css for it.
What I would like to know is:
Is this the correct behaviour?
Is there any fix or option that we need to control on Froala to make
it look bold?
Apart from writing custom css for it, if there are any options please let me know.
You can check out the said behaviour on one of the demo pages they have: Froala Demo
Thanks in Advance!
PS: Let me know if you guys need code samples from my end, I have not done anything(custom) apart from the samples available on their website.
I have an issue with a wordpress theme top menu search icon, I want to change it to a custom .png file saying "book now", and change it's function from an search form that is currently opening, to a simple url to open the store page in the website.
The theme is the following https://themes.waituk.com/entrada-default/
I've managed to figure the search icon is an svg file while fiddling with chrome's network tools and the theme styles.css file, but found the search icon being mentioned several times throughout the file and wasn't sure which one references it, or if I need to change something in another file in the theme structure.
Any help would be appreciated.
From what I could see from the link you shared, there are basically 2 things that need to be understood here:
1- The Icon.
I couldn't find any reference to a svg file, may be the downloadable theme is different from the demo page you have shared. In this case, the search icon is being generated by a plugin called "icomoon" (https://icomoon.io/), so I suggest to change the span class "icon icon-search" to a new class with a custom css for your new png icon.
2- The search function
The search function is also being called by what appears to be a plugin, in a function at jquery.main.js:
// apply search plugin
$body.search({
hideOnClickOutside: false,
menuActiveClass: 'search-active',
menuOpener: '.search-opener',
menuDrop: '.form-group'
});
Here you will need to change the a class "search-opener" to something else or comment out this function before modifying the link as you want. I hope this helps.
I just found that, in Adobe Dreamweaver CS3, this code segment seems fine in the design view,
Test Anchor
but if I add an "id" attribute to this "a" tag, like this,
<a id="test" href="#">Test Anchor</a>
there would be an icon at the left side of the "a" element, something just like an open book. (I have no privileges to upload image)
What is the meaning of the icon? Is there anything that Dreamweaver implies? I've tried to google some groups of keywords, and got nothing but ads.
Any help? Thanks a lot!
This icon (should look like a shield with an anchor on it) is a Dreamweaver design view indicator. This indicator is used to identify "named" anchors. No image that will be uploaded to your site, so don't worry about that. Anchor () tags with an ID are considered "named" as you can add a hash to the end of your URL to have the browser "jump" to the named/ided element. If you file is test.html and you visit your page with test.html#test then the browser will load up your page and "jump" to the named anchor. In recent browsers (not sure how far back, but likely far enough to not worry too much about it now) anchors with an id attribute value will work in the same manner as those with a name attribute value.
If you do not like this icon appearing when you have a couple of options:
Edit (Dreamweaver on Mac) -> Preferences, Invisible Elements, uncheck Named anchors.
Or View -> Visual Aids -> Invisible Elements. This option turns off all invisible element indicators listed in the preferences, so make sure you know what things your turning off.
It's probably just using the symbol to identify text on the page that's a link, save the file and load it up in your web browser, chances are the icon isn't actually part of your code.
i want to display the menu while clicking image button & should hide menu(click again)
in Ruby/ HTML
Like Windows Start button
This is html/js issue. See this page: http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
I recently followed the following tutorial, http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html, and found it to be a good one. All the HTML / CSS / JS is laid out very clearly, and the example is bare-bones enough that's it's very easy to customize to make it look exactly how you want it.
In my html select element I would like to show a black arrow and no background.
How can I do it?
You can use a plugin for jQuery, I actually contributed to such a jQuery plugin and you can find the code on github.
The plugin allows you to cusomize the look and feel of the select boxes in your application, not just the arrow but the entire behavior can be customized.
Here's a link to the source code on github (forked)
http://github.com/KensoDev/Stylish-Select
This was tested in IE6,7,8 FF Chrome...
One way would be to use a background image for the select. However, it's not well supported. Personally, I wouldn't use a select for this.
See this for more info: http://doctype.com/styling-select-elements-backgrounds-etc
Here's an alternative method which may work: http://pennypacker.net/articles/css_tricks_select_menu